React Natite实现图片轮播器

图片轮播器在客户端开发中非常常见,iOS原生开发时候我们可以使用scrollview实现.在跨平台React Native中我们同样可以使用这个组件.不过如果想要更快更高效那我们就可以使用框架:react-native-swiper
具体使用方法:

安装

1,打开终端进入当前项目
2,输入npm install react-native-swiper --save

导入框架

import Swiper from 'react-native-swiper';

具体实现过程

<Swiper
  style={styles.wrapper}
  height={200}//设置高度,不设置默认占满全屏
  showsButtons={false}//是否显示左右箭头
   horizontal={true}//水平还是垂直方向
  autoplay={true}//是否自动循环
  autoplayTimeout={1}//循环间隔
  dot={<View style={{width:8,height:8,backgroundColor:'white',borderRadius:4,marginTop:10,marginLeft:10,marginRight:10}}></View>}//自定义指示点
  activeDot={<View style={{width:8,height:8,backgroundColor:'orange',borderRadius:4,marginTop:10, marginLeft:10,marginRight:10}}></View>}//当前指示点
             >
    <View style={styles.slide1}>
      <Text style={styles.text}>第一页</Text>
    </View>
    <View style={styles.slide2}>
        <Text style={styles.text}>第二页</Text>
     </View>
     <View style={styles.slide3}>
         <Text style={styles.text}>第三页</Text>
      </View>
</Swiper>

样式
wrapper: {
        backgroundColor:'green',
        height:200
    },
    slide1: {
        // flex: 1,
        height: 200,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB',
    },
    slide2: {
        // flex: 1,
        height: 200,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5',
    },
    slide3: {
        // flex: 1,
        height: 200,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9',
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold',
    }

效果如下

轮播图.png