React Native学习之ViewPagerAndroid组件

一个允许在子视图之间左右翻页的容器。每一个ViewPagerAndroid的子容器会被视作一个单独的页，并且会被拉伸填满ViewPagerAndroid。

注意所有的子视图都必须是纯View，而不能是自定义的复合容器。

ViewPagerAndroid组件的属性

• initialPage：初始选中页的下标

ViewPagerAndroid组件的方法

1)、onPageScroll

当在页间切换时（不论是由于动画还是由于用户在页间滑动/拖拽）执行。

回调参数中的event.nativeEvent对象会包含如下数据：
position offset 一个在[0,1)（大于等于0，小于1）之间的范围，代表当前页面切换的状态。

2)、onPageScrollStateChanged

状态包含：idle dragging settling

3)、onPageSelected

在页面切换完成后（当用户在页面间滑动）调用。

回调参数中的event.nativeEvent对象会包含如下的字段： position

4)、scrollEnabled

boolean类型，设置为true即可滑动。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    ViewPagerAndroid,
    View
} from 'react-native';

class RNAPP extends Component {
    render() {
        return (
            <ViewPagerAndroid
                initialPage={0}
                style={[styles.flex, styles.viewpager]}
                >
                <View style={styles.center}>
                   <Text style={[{fontSize:12}, {color:'red'}]}>第一个页面</Text>
                </View>
                <View style={styles.center}>
                    <Text style={{fontSize:20}}>第二个页面</Text>
                </View>
                <View style={styles.center}>
                    <Text style={{fontSize:30}}>第三个页面</Text>
                </View>

            </ViewPagerAndroid>
        );
    }
}

const styles = StyleSheet.create({
    flex:{
        flexDirection:'column',
    },
    viewpager:{
        height:200,
    },
    center:{
        justifyContent:'center',
        alignItems:'center',
    },
});

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