react-native 轮播图 ——react-native-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,}
});

 1 <Swiper
 2     style={styles.swiper}          //样式
 3     height={200}                   //组件高度
 4     loop={true}                    //如果设置为false，那么滑动到最后一张时，再次滑动将不会滑到第一张图片。
 5     autoplay={true}                //自动轮播
 6 autoplayTimeout={4}                //每隔4秒切换
 7     horizontal={true}              //水平方向，为false可设置为竖直方向
 8     paginationStyle={{bottom: 10}} //小圆点的位置：距离底部10px
 9     showsButtons={false}           //为false时不显示控制按钮
10     showsPagination={false}       //为false不显示下方圆点
11     dot={<View style={{           //未选中的圆点样式
12     backgroundColor: ‘rgba(0,.2)‘,13     width: 18,14     height: 18,15     borderRadius: 4,16     marginLeft: 10,17     marginRight: 9,18     marginTop: 9,19     marginBottom: 9,20 }}/>}
21     activeDot={<View style={{    //选中的圆点样式
22     backgroundColor: ‘#007aff‘,23     width: 18,24     height: 18,25     borderRadius: 4,26     marginLeft: 10,27     marginRight: 9,28     marginTop: 9,29     marginBottom: 9,30 }}/>}
31  
32 >
33     <Image source={require(‘./js/img/a.jpg‘)} style={styles.img}/>
34     <Image source={require(‘./js/img/b.jpg‘)} style={styles.img}/>
35     <Image source={require(‘./js/img/c.jpg‘)} style={styles.img}/>
36 </Swiper>