上篇文章中,我们一起构建了京东client的TabBar。在本文中。将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧!

1.相关控件调研

眼下在Github开源的轮播图控件,个人觉得做得比較好的,一个是react-native-swiper(https://github.com/leecade/react-native-swiper),一个是react-native-viewpager(https://github.com/race604/react-native-viewpager),而经过试用发现。react-native-swiper尽管效果和样式较多、控制方便,但在将它缩小为一个固定高度的视图时,其底部的指示符号(即几个点,例如以下图)就不见了,所以终于我推荐使用react-native-viewpager。简单好用。

aaarticlea/png;base64,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" alt="" />

2.加入相关文件

下来我们将素材和相关的库导入项目当中,当中,react-native-viewpager的加入方法例如以下:

npm i -d react-native-viewpager --save

然后在project的images目录中创建banner目录,当中放入4个jpg文件:

React Native布局实践:开发京东client首页(三)——轮播图的实现-LMLPHP

接着,我们在HomePage类的定义前。创建一个数组常量,用于存放图片:

const BANNER_IMGS = [
require('../images/banner/1.jpg'),
require('../images/banner/2.jpg'),
require('../images/banner/3.jpg'),
require('../images/banner/4.jpg')
];

经过这么几个简单的步骤。我们对图片的引入也就完毕了。下来须要构建轮播图控件的布局。

3.构建ViewPager

经过分析,我们能够看到。首页轮播图的样式十分简单,仅仅须要指定高度,而水平方向,利用flex:1进行拉伸

React Native布局实践:开发京东client首页(三)——轮播图的实现-LMLPHP

但因为react-native-viewpager作者在构建这个控件的时候,应该是用到一些变量进行控制,并提供了一种方法。用于创建图片数据源,所以,假设须要使用react-native-viewpager必须在构造函数中进行初始化,详细代码例如以下:

    constructor(props) {
super(props);
// 用于构建DataSource对象
var dataSource = new ViewPager.DataSource({
pageHasChanged: (p1, p2) => p1 !== p2,
});
// 实际的DataSources存放在state中
this.state = {
dataSource: dataSource.cloneWithPages(BANNER_IMGS)
}
}

而在render函数中,ViewPager的使用也是相当简单的。详细写法例如以下:

                <ViewPager
style={{height:130}}
dataSource={this.state.dataSource}
renderPage={this._renderPage}
isLoop={true}
autoPlay={true}/>

当中:

style:样式,和其它控件设置方式相似

dataSource:即在构造函数中利用dataSource对象和图片数组常量,创建的真实dataSource

renderPage:方法类型,返回一段JSX。用于指定ViewPager每页的内容,该方法写法例如以下,切忌依据WebStorm的提示加上static!:

    _renderPage(data, pageID) {
return (
<Image
source={data}
style={styles.page}/>
);
}

isLoop:是否循环播放。依照演示样例代码设置就可以

autoPlay:是否自己主动播放,依照演示样例代码设置就可以

locked: 设置为true即禁用ViewPager的点击

onChangePage: 页面切换的回调函数

renderPageIndicator: 自己定义指示器样式的渲染

animation:假设觉得原始的效果不惬意,能够在这个字段中设置一个函数,自己定义动画效果

当然,要记得给ViewPager和当中的item加入样式:

const styles = StyleSheet.create({
page: {
flex: 1,
height: 130,
resizeMode: 'stretch'
}
});

保存一下代码。在模拟器上看看效果吧

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

project源代码及资源文件:https://github.com/yuanguozheng/JdApp

本次Commit:https://github.com/yuanguozheng/JdApp/commit/2d1741bef1c7908c9e0d2f52c23210e8de2fcc7a

转载请注明出处:http://blog.csdn.net/yuanguozhengjust/article/details/50556700

05-11 14:45