孙肖宁

React native轮播图
第一步:安装react-native-swipernpm i react-native-swiper –save ...
扫描右侧二维码阅读全文
12
2018/10

React native轮播图

第一步:安装react-native-swiper

npm i react-native-swiper –save 

第二步:导入react-native-swiper

import Swiper from ‘react-native-swiper’;

第三步:使用

  <Swiper
       style={styles.swiper}
       height={200}
       horizontal={true}
       paginationStyle={{bottom: 10}}
       autoplay={true}
       autoplayTimeout={3}
       showsButtons={false}>
       <Image source={require('../../images/login_logo1.png')} style={styles.img}/>
       <Image source={require('../../images/login_logo2.png')} style={styles.img}/>
       <Image source={require('../../images/login_logo3.png')} style={styles.img}/>
  </Swiper>

样式:

 img: {
       height: 200,
       width:600,
   },
   swiper:{
       height: 300,
   },

小提示:Swiper外面加一个View。
常见的属性和方法请参考:https://github.com/leecade/react-native-swiper

Last modification:October 21st, 2018 at 07:49 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment