今天学习了轮播图的使用，上网查阅了一下，发现有react-native-swiper和React-Native-Viewpager（https://blog.csdn.net/zhukui66/article/details/51077592）两种封装的比较好的第三方组件，对比了下文档，觉得react-native-swiper功能更加完善，而且文档说明比较全面，所以只用了react-native-swiper，下面介绍下react-native-swiper的使用。该组件同时支持android和iOS。
react-native-swiper的github地址
使用说明：
- 先安装React-native-swiper
npm install react-native-swiper --save - 导入Swiper
import Swiper from ‘react-native-swiper’;
3.使用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>
image.png
image.png
image.png
image.png
