react-native 轮播图 ——react-native-swiper使用

今天学习了轮播图的使用，上网查阅了一下，发现有react-native-swiper和React-Native-Viewpager 两种封装的比较好的第三方组件，对比了下文档，觉得react-native-swiper功能更加完善，而且文档说明比较全面，所以只用了react-native-swiper，下面介绍下react-native-swiper的使用。该组件同时支持android和iOS。

react-native-swiper的github地址

使用说明：

1. 先安装React-native-swiper

使用说明： 
1. 先安装React-native-swiper 
npm i react-native-swiper –save 
2. 导入Swiper 
import Swiper from ‘react-native-swiper’;

1. 使用 Swiper

<Swiper    style={styles.swiper}    height={200}    horizontal={true}    paginationStyle={{bottom: 10}}    showsButtons={false}>    <Image source={require('./js/img/a.jpg')} style={styles.img}/>    <Image source={require('./js/img/b.jpg')} style={styles.img}/>    <Image source={require('./js/img/c.jpg')} style={styles.img}/></Swiper>const styles = StyleSheet.create({    swiper: {},    img: {        width: dimensions.width,        height: 200,    }});

4.相关属性和方法介绍 
先看个事例：

<Swiper    style={styles.swiper}          //样式    height={200}                   //组件高度    loop={true}                    //如果设置为false，那么滑动到最后一张时，再次滑动将不会滑到第一张图片。    autoplay={true}                //自动轮播autoplayTimeout={4}                //每隔4秒切换    horizontal={true}              //水平方向，为false可设置为竖直方向    paginationStyle={{bottom: 10}} //小圆点的位置：距离底部10px    showsButtons={false}           //为false时不显示控制按钮    showsPagination={false}       //为false不显示下方圆点    dot={<View style={{           //未选中的圆点样式    backgroundColor: 'rgba(0,0,0,.2)',    width: 18,    height: 18,    borderRadius: 4,    marginLeft: 10,    marginRight: 9,    marginTop: 9,    marginBottom: 9,}}/>}    activeDot={<View style={{    //选中的圆点样式    backgroundColor: '#007aff',    width: 18,    height: 18,    borderRadius: 4,    marginLeft: 10,    marginRight: 9,    marginTop: 9,    marginBottom: 9,}}/>}>    <Image source={require('./js/img/a.jpg')} style={styles.img}/>    <Image source={require('./js/img/b.jpg')} style={styles.img}/>    <Image source={require('./js/img/c.jpg')} style={styles.img}/></Swiper>

showsButtonsTRUEbool为true时显示控制按钮buttonWrapperStyle{backgroundColor: 'transparent', flexDirection: 'row', position: 'absolute', top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center'}style自定义样式nextButton<Text style={styles.buttonText}>›</Text>element允许自定义下一个按钮prevButton<Text style={styles.buttonText}>‹</Text>element允许自定义上一个按钮

属性默认值类型描述showsPaginationTRUEbool为true时显示小圆点paginationStyle{...}style允许自定义小圆点的样式renderPagination-functionComplete control how to render pagination with three params (index, total, context) ref to this.state.index / this.state.total / this, For example: show numbers instead of dots.dot<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />element自定义没有选中时的组件activeDot<View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />element自定义选中时的组件dotStyle-object自定义选中的元素dotColor-string自定义选中的元素activeDotColor-string自定义选中的元素activeDotStyle-object自定义选中的元素