1.首先 npm install react-native-swiper
2.其次 react-native link
3.最后 引入下方的相关属性 ok

<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>
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐