React-native之开源轮播组件react-native-

一. 简介

这节介绍下使用第三方轮播组件react-native-swiper，github地址:https://github.com/leecade/react-native-swiper

二. 使用步骤

（1）使用git命令行 在项目的根目录使用npm命令
npm i react-native-swiper --save
这样就把开源组件引入到项目中了,可以在根目录的node_modules文件夹中查看
（2）在界面代码中导入组件
import Swiper from 'react-native-swiper';
（3）渲染
render(){ return (//设置轮播组件Swiper的包裹容器高度，使用属性设置，不能通过样式设置 <Swiper style={styles.wrapper} showsButtons={false} height={200} autoplay={true}> <View style={styles.slide1}> <Image style={{width:screenWidth,height:200}} resizeMode='stretch' source={{uri:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'}} /> </View> <View style={styles.slide2}> <Image style={{width:screenWidth,height:200}} resizeMode='stretch' source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1485172058263&di=66b0ad3449e48525d5b74f2d7cc086ca&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Flvpics%2Fh%3D800%2Fsign%3D9931b79f1dd5ad6eb5f969eab1ca39a3%2Fa8773912b31bb051b3333f73307adab44aede052.jpg'}} /> </View> <View style={styles.slide3}> <Image style={{width:screenWidth,height:200}} resizeMode='stretch' source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1485172058262&di=81e685c51f3441d1f6cdaf2088dedcf2&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2Fimg013%2Fv5%2F2%2Fd%2F43.jpg'}} /> </View> </Swiper> ); }

const styles = StyleSheet.create({ wrapper: { }, slide1: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#9DD6EB', }, slide2: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#97CAE5', }, slide3: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#92BBD9', }, text: { color: '#fff', fontSize: 30, fontWeight: 'bold', } });
效果

swiper_01.png swiper_02.png swiper_03.png

获取屏幕的宽度:
var screenWidth =Dimensions.get('window').width;
其他功能命令行
查看模块：npm view react-native-swiper
删除模块：npm rm react-native-swiper --save
清理缓存：npm cache clean

注意：设置轮播组件Swiper的包裹容器高度，使用属性设置，不能通过样式设置

react-native-swioer_01.png

如果遇到这个错误，请重新 start你的项目。react-native start 和 react-native run-android