React Native布局实践:开发京东client首页(三)——轮播图的实现
上篇文章中,我们一起构建了京东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。简单好用。
2.加入相关文件
下来我们将素材和相关的库导入项目当中,当中,react-native-viewpager的加入方法例如以下:
npm i -d react-native-viewpager --save然后在project的images目录中创建banner目录,当中放入4个jpg文件:
接着,我们在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-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' } });
保存一下代码。在模拟器上看看效果吧
project源代码及资源文件:https://github.com/yuanguozheng/JdApp
本次Commit:https://github.com/yuanguozheng/JdApp/commit/2d1741bef1c7908c9e0d2f52c23210e8de2fcc7a
转载请注明出处:http://blog.csdn.net/yuanguozhengjust/article/details/50556700