React Native控件之ViewPagerAndroid讲解

React Native控件之ViewPagerAndroid讲解

（一）前言

这篇文章讲解一下ViewPagerAndroid组件，说到React Native for Android版本中的ViewPagerAndroid组件和Android中的ViewPager控件作用相类似。这个容器允许容器中子视图相互左右滑动。每个ViewPagerAndroid中的子视图都会当做一个单独的页面，并且会撑满整个ViewPagerAndroid组件的界面。
【注意】ViewPagerAndroid中的所有子View必须为< View>控件，不能为其他的组件，你可以为每个View组件添加 style样式，如：padding或者backgroundColor之类的属性。

（二）属性

• View相关属性样式都被全部继承（例如：宽和高，背景颜色，边距等相关属性样式）
• initialPage number ViewPagerAndroid初始索引页，不过我们可以使用setPage方法来更新页码，通过onPageSelected方法来监听页面滑动。
• keyboardDismissMode enum(‘none’,’on-drag’) 枚举类型，进行设置在拖拽滑动的过程中是否要显示键盘。默认值为‘none’，拖拽中不隐藏键盘；‘on-drag’，拖拽滑动开始的时候隐藏键盘。

• onPageScroll function 方法，该方法在页面进行滑动的时候执行。这个会回调传入的event.nativeEvent对象，会携带如下参数:

  ‘position’ 从左起开始第一个可见的页面的索引；

  ‘offset’ 该value值的范围为[0,1)，该用来代表当前页面的却换的状态。值x代表该索引页面(1-x)的范围可见，另外x范围代表下一个页面可见的区域

• onPageScrollStateChanged function 这个回调方法会在页面滚动状态发生变化的时候进行调用。页面的滚动状态有下面三种情况：
  ‘idle’：表示当前用户和页面滚动没有任何交互

  ‘dragging’ 拖动中，该表示当前页面正在被拖拽滑动中
  ‘settling’ 表示存在页面拖拽或者滑动的交互。页面滚动正在结束。

• onPageSelected function 方法 在页面进行拖拽滑动切换完成之后回调。该方法回调参数中的event.nativeEvent对象会携带如下一个属性 : ‘position’ 该属性代表当前选中的页面的索引.

• pageMargin number 页面之间现实的空白空间。只能在拖动时可见，页面仍然是边缘到边缘的。

• scrollEnabled bool 当为false时，不能滚动了。默认是true。

（三）方法

• setPage(selectedPage) 一个辅助函数去滑动到指定页面。这个转换是有动画效果。
• setPageWithoutAnimation(selectedPage)
  一个辅助函数去滑动到指定页面。这个转换没有动画效果。

（四）实例

上面已经对于ViewPagerAndroid组件的基本的属性以及方法做了详细讲解，下面仿照美团首页顶部分类切换页面。
首先分析一下顶部效果，一共包含两个页面可以左右滑动切换，每个页面包含十个小板块，下面直接上代码：

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

var titles_first_data  = ["美食","电影","酒店","KTV","外卖","优惠买单","周边游","休闲娱乐","今日新单","丽人"];
var titles_second_data = ["购物","火车票","生活服务","旅游","汽车服务","足疗按摩","小吃快餐","经典门票","境外游","全部分类"];

var PerfectProject = React.createClass({
    getInitialState () {
     return {
        page:1,
      }
   },

   onPageSelected: function (e) {
     this.setState({page: 1+e.nativeEvent.position});      
   },
   render: function(){
    return(  
      <View >
        <Text style={
   {
   textAlign:'center'}}>
            美团首页顶部效果实例
        </Text>
        <ViewPagerAndroid style={styles.pageStyle} initialPage={0}  onPageSelected={this.onPageSelected}>
          <View>
            <View style={
   {
   flexDirection:'row'}}>
              <View style={
   {
   width:70}}>
                 <Image source={require('./img/one.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_first_data[0]}</Text>
              </View>
              <View style={
   {
   width:70}}>
                 <Image source=