React-native之开源轮播组件react-native-swiper（14）

一. 简介

这节介绍下使用第三方轮播组件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的包裹容器高度，使用属性设置，不能通过样式设置 ); }

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