RN开发实践——仿携程App（二）

文章最后附上源码地址

上一片博客链接RN开发实践——仿携程App（一）

实现首页的轮播图

Swiper简介

The best Swiper component for React Native。Swiper是目前应用较广泛的移动端网页触摸内容滑动js插件。

Swiper : GitHub地址

1.基本属性：

Prop	Default	Type	Description
horizontal	true	bool	如果值为true时，那么滚动的内容将是横向排列的，而不是垂直于列中的。
loop	true	bool	如果设置为false，那么滑动到最后一张时，再次滑动将不会展示第一张图片。
index	0	number	初始进入的页面标识为0的页面。
showsButtons	false	bool	如果设置为true，那么就可以使控制按钮（即：左右两侧的箭头）可见。
autoplay	false	bool	设置为true，则页面可以自动跳转。

2.页码属性

Prop	Default	Type	Description
showsPagination	true	bool	默认值为true，在页面下边显示圆点，以标明当前页面位于第几个。
paginationStyle	{…}	style	设置页面原点的样式，自定义的样式会和默认样式进行合并。
renderPagination
dot	…	element	可以自定义不是当前圆点的样式
activeDot	…	element	可以自定义当前

3.自动播放的属性

Prop	Default	Type	Description
autoplay	true	`bool`	设置为true可以使页面自动滑动。
autoplayTimeout	2.5	`number`	设置每个页面自动滑动停留的时间
autoplayDirection	true	`bool`	圆点的方向允许默认自己控制

引入Swiper第三方库

进入项目的根目录执行下面的指令：

npm i react-native-swiper --save
// 建议安装1.5.5版本比较稳定: npm i react-native-swiper@1.5.5 --save

如果报错请执行多次

使用Swiper库，自定义Banner轮播图组件

新建一个Banner组件

封装自己的一个轮播组件Banner，将在这个控件使用Swiper。

使用Banner组件

在HomePage中使用刚才创建的Banner组件，预先占个位置，效果后面一步一步实现。

执行效果：

给Banner传递数据

准备数据

这里呢，在App文件夹里创建一个data文件夹，用来存放一些模拟数据，建立了一个homebean的Json数据文件。用于首页数据加载。

导入数据

在HomePage组件中引入homebean这个json数据文件

//导入数据
var homebean=require('../../date/homebean.json');

把数据传递给Banner组件

获取到homebean数据中的banners集合（轮播图数据），并通过在Banner组件中定义好的属性 banners 传递给Banner组件。

{/*广告轮播图*/}
<Banner banners={homebean.banners}></Banner>

Banner组件接收数据

回到Banner组件中，获取属性值(this.props.banners)接收传递过来的轮播图数据。

//接收数据
var banners=this.props.banners;

引入Swiper第三方库

Banner组件获取完数据，引入Swiper，开始使用Swiper来实现轮播图

简单的布局

在Swiper简单的创建两个View组件(每个组件对应一个轮播图)，预览看下效果，Swiper默认会生成指示器。

添加每个轮播广告图

遍历传递过来的banners轮播图数据，
添加每个轮播广告图。

获取屏幕的宽度，根据效果图每个轮播广告图的宽为手机的宽度

//获取手机屏幕的宽
var {width} =Dimensions.get('window');

修改轮播图指示器的颜色

通过对Swiper组件属性的了解，改变dot 和 activedot,来修改轮播图指示器选中和为选中的样式，这里dot和activedot，需要传递一个View组件，并给View设置对应的样式style即可。

修改轮播图指示器的位置

通过设置Swiper属性paginationStyle 来修改轮播图的指示器位置，底层是通过绝对定位实现。

循环滚动和自动滚动

通过设置Swiper属性loop和autoplay开启轮播图循环和自动滚动。

最终轮播图实现效果如下：

最后附上项目地址