React Native之旅05－控件ViewPagerAndroid

800 查看

1、ViewPagerAndroid介绍

是一个允许在子视图之间左右翻页的容器。每一个ViewPagerAndroid的子容器会被视作一个单独的页，并且会被拉伸填满ViewPagerAndroid。
注意所有的子视图都必须是纯View，而不能是自定义的复合容器。可以给每个子视图设置样式属性，如padding或backgroundColor等。

2、ViewPagerAndroid的用法

initialPage number
初始选中的页的下标。你可以用setPage函数来翻页
keyboardDismissMode enum('none', 'on-drag')
决定在滑动的时候是否要让软键盘消失。
none:不会消失
on-drag:当拖拽开始的时候会让键盘消失。
onPageScroll
当在页间切换时不管是由于动画还是由于用户在页间滑动/拖拽都会执行。
回调参数中的event.nativeEvent对象会包含如下数据：
position:页面的下标
offset:偏移量，在0-1之间。值x表示现在"position"所表示的页有(1 - x)的部分可见，而下一页有x的部分可见。
onPageScrollStateChanged
页面滑动状态变化时调用此回调函数。页面滑动状态可能为以下三种的一种
idle:空闲，意味着当前没有交互。
dragging:拖动中，意味着当前页面正在被拖动。
settling:处理中，意味着当前页面发生过交互，且正在结束开头或收尾的动画。
onPageSelected
这个回调会在页面切换完成后（当用户在页面间滑动）调用
回调参数中的event.nativeEvent对象会包含如下数据：
position:页面的下标
3、ViewPagerAndroid实例
仿美团头部的分类，图如下：

第一页

第二页

具体代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React,
{
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    Image,
    View,
    ViewPagerAndroid
}
from 'react-native';

var ToolbarAndroid = require('ToolbarAndroid');

var data1 = ["美食", "电影", "酒店", "KTV", "外卖", "优惠买单", "周边游", "火车票", "今日新单", "丽人"];
var data2 = ["休闲娱乐", "购物", "生活服务", "旅游", "汽车服务", "男装", "女装", "母婴亲子", "境外游", "全部分类"];

class ViewPagerAndroidDemo extends Component {

    constructor() {
        super();
        this.state = {
            page: 1
        }
        this.onPageSelected = this.onPageSelected.bind(this)
    }

    onPageSelected(e) {
        this.setState({
            page: 1 + e.nativeEvent.position
        })
    }

    render() {
        return ( < View style = {
            {
                flex: 1,
                flexDirection: 'column',
            }
        } > <ToolbarAndroid title = "仿美团头部滑动分类"style = {
            {
                height: 56,
                backgroundColor: '#ffffff'
            }
        } > </ToolbarAndroid>
                <ViewPagerAndroid
                    style={styles.viewPager}
                    initialPage={0}
                    onPageSelected={this.onPageSelected}
                >
                    <View style={styles.pageStyle}>
                        <View style={styles.row}>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('./image / ic_category_0.png ')}/>
                                <Text style={styles.text}>{data1[0]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_1.png ')}/>
                                <Text style={styles.text}>{data1[1]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_2.png ')}/>
                                <Text style={styles.text}>{data1[2]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_3.png ')}/>
                                <Text style={styles.text}>{data1[3]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_21.png ')}/>
                                <Text style={styles.text}>{data1[4]}</Text>
                            </View>
                        </View>
                        <View style={styles.row}>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_5.png ')}/>
                                <Text style={styles.text}>{data1[5]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_6.png ')}/>
                                <Text style={styles.text}>{data1[6]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_22.png ')}/>
                                <Text style={styles.text}>{data1[7]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_4.png ')}/>
                                <Text style={styles.text}>{data1[8]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_11.png ')}/>
                                <Text style={styles.text}>{data1[9]}</Text>
                            </View>
                        </View>
                    </View>
                    <View style={styles.pageStyle}>
                        <View style={styles.row}>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_10.png ')}/>
                                <Text style={styles.text}>{data2[0]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_14.png ')}/>
                                <Text style={styles.text}>{data2[1]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_9.png ')}/>
                                <Text style={styles.text}>{data2[2]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_13.png ')}/>
                                <Text style={styles.text}>{data2[3]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_7.png ')}/>
                                <Text style={styles.text}>{data2[4]}</Text>
                            </View>
                        </View>
                        <View style={styles.row}>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_18.png ')}/>
                                <Text style={styles.text}>{data2[5]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_19.png ')}/>
                                <Text style={styles.text}>{data2[6]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_17.png ')}/>
                                <Text style={styles.text}>{data2[7]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_23.png ')}/>
                                <Text style={styles.text}>{data2[8]}</Text>
                            </View>
                            <View style={styles.view}>
                                <Image style={styles.image}
                                       source={require('. / image / ic_category_15.png ')}/>
                                <Text style={styles.text}>{data2[9]}</Text>
                            </View>
                        </View>
                    </View>
                </ViewPagerAndroid>
                <Text style={{alignSelf:'center '}}>当前第{this.state.page}页</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    viewPager: {
        alignItems: 'center ',
        flexDirection: 'column ',
        height:160
    },
    pageStyle: {
        flex: 1,
        flexDirection: 'column ',
    },
    row: {
        flexDirection: 'row ',
        paddingLeft: 6,
        paddingRight: 6,
        paddingTop: 12,
    },
    view: {
        flex: 1,
        flexDirection: 'column ',
    },
    image: {
        alignSelf: 'center ',
        width: 45,
        height: 45
    },
    text: {
        alignSelf: 'center ',
        fontSize: 11,
        color: '#555555 ',
        textAlign: 'center ',
        marginTop: 4,
    },
});

AppRegistry.registerComponent('ViewPagerAndroidDemo ', () => ViewPagerAndroidDemo);
'

最后注意：
最新版的 react-native 为0.19.0，今天升完级重新创建项目之后发现相比较之前的有点不同
0.19

class ViewPagerAndroidDemo extends Component {}

之前的

var ViewPagerAndroidDemo = React.createClass({})

最大的变化时里面方法的书写和声明
0.19

constructor() {
    super();
    this.state={page:1}
    this.onPageSelected = this.onPageSelected.bind(this)
}
onPageSelected(e){
    this.setState({page:1+e.nativeEvent.position})
}

以前

getInitialState: function () {
        return {
           page:0
        };
    },
onPageSelected: function(e) {  
    this.setState({page:1+e.nativeEvent.position});  
  },

欢迎留言或私信交流，谢谢

转载请注明转载地址：http://www.jianshu.com/p/6654c0cf30b7
React Native之旅05－控件ViewPagerAndroid

React Native之旅05－控件ViewPagerAndroid

1、ViewPagerAndroid介绍

2、ViewPagerAndroid的用法

3、ViewPagerAndroid实例