图片轮播器在客户端开发中非常常见,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
