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

接着，我们在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)
        }
    }

                <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}/>
        );
    }

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