react-native 轮播图 ——react-native-swiper使用 属性介绍

今天学习了轮播图的使用，上网查阅了一下，发现有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地址

使用说明：

1. 先安装React-native-swiper
   npm install react-native-swiper --save
2. 导入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

 

作者：现实梦想_96b0
链接：https://www.jianshu.com/p/8905d988d1db
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。