【React Native开发】React Native控件之ViewPagerAndroid讲解以及美团首页顶部效果实例(17)

(一)前言

今天我们一起来看一下ViewPagerAndroid组件完成解析以及仿照实现美团首页顶部效果。

刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

说到React Native for Android版本中的ViewPagerAndroid组件和Android中的ViewPager控件作用相类似。该容器允许容器中的子视图相互的左右滑动。每一个ViewPagerAndroid中的子视图都会当做一个单独的页面，并且会撑满整个ViewPagerAndroid组件的界面。

【特别注意】ViewPagerAndroid中的所有子View必须为控件，不能为复合型的组件。你可以为每一个子视图添加列如:padding或则backgroundColor之类的属性。

(二)官方实例

如果你学过Android或者Web前端开发，对这样的ViewPagerAndroid组件还是比较容易学的，该组件我们可以做广告轮播等相关效果哦~

首先我们来看一下官方给我们的实例(本人做过相应修改)，具体代码如下:

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  ViewPagerAndroid,
} from'react-native';
 
class ViewPagerDemoextends Component {
  render() {
    return (
      <view>
        <text style="{styles.welcome}">
            ViewPagerAndroid实例
        </text>
        <viewpagerandroidstyle={styles.pagestyle} initialpage="{0}">
             <viewstyle={{backgroundcolor:"red"}}>
                   <text>FirstPage!</text>
             </viewstyle={{backgroundcolor:"red"}}></viewpagerandroidstyle={styles.pagestyle}></view>
             <viewstyle={{backgroundcolor:"yellow"}}>
                   <text>SecondPage!</text>
             
        
      
    );
  }
}
const styles =StyleSheet.create({
   pageStyle: {
    alignItems: 'center',
    padding: 20,
    height:200,
  }
});
AppRegistry.registerComponent('ViewPagerDemo',() => ViewPagerDemo);</viewstyle={{backgroundcolor:"yellow"}}>

该官方实例运行效果如下:

(三)属性方法

• 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' 该属性代表当前选中的页面的索引.

        (四)ViewPagerAndroid使用实例

        上面我们已经对于ViewPagerAndroid组件的基本介绍实例以及相关的属性方法做了详细讲解了，下面我们来返照实现美团首页顶部分类切换页面。

        首先我们分析一下美团首页顶部效果，该包含美团的业务Item入口，该每个页面包含十大版本，一共两个页面可以进行左右滑动切换。下面来看一下具体代码:

         

        /**
         * @autor:江清清
         * 模仿实现美团首页顶部分类item功能效果实例
         * https://github.com/facebook/react-native
         */
        'use strict';
        import React, {
          AppRegistry,
          Component,
          StyleSheet,
          Text,
          View,
          Image,
          ViewPagerAndroid,
        } from'react-native';
         
        var titles_first_data=["美食","电影","酒店","KTV","外卖","优惠买单","周边游","休闲娱乐","今日新单","丽人"];
        var titles_second_data=["购物","火车票","生活服务","旅游","汽车服务","足疗按摩","小吃快餐","经典门票","境外游","全部分类"];
        var ViewPagerDemo =React.createClass({
          getInitialState: function() {
            return {
              page:1,
            };
          },
          onPageSelected: function(e) {
            this.setState({page:1+e.nativeEvent.position});
          },
          render() {
            return (
              <view>
                <text style="{{textAlign:'center'}}">
                    美团首页顶部效果实例
                </text>
                <viewpagerandroid initialpage="{0}" style="{styles.pageStyle}" data-cke-pa-onpageselected="{this.onPageSelected}">
                  <view>
                    <view style="{{flexDirection:'row'}}">
                      <view style="{{width:70}}">
                         <img source="{require('./img/one.png')}" style="{styles.imageStyle}">
                         <text style="{styles.textStyle}">{titles_first_data[0]}</text>
                      </view>
                      <view style="{{width:70}}">
                         <img source="{require('./img/two.png')}" style="{styles.imageStyle}">
                         <text style="{styles.textStyle}">{titles_first_data[1]}</text>
                      </view>
                      <view style="{{width:70}}">
                         <img source="{require('./img/three.png')}" style="{styles.imageStyle}">
                         <text style="{styles.textStyle}">{titles_first_data[2]}</text>
                      </view>
                      <view style="{{width:70}}">
                         <img source="{require('./img/four.png')}" style="{styles.imageStyle}">
                         <text style="{styles.textStyle}">{titles_first_data[3]}</text>
                      </view>
                      <view style="{{width:70}}">
                         <img source="{require('./img/five.png')}" style="{styles.imageStyle}">
                         <text style="{styles.textStyle}">{titles_first_data[4]}</text>
                      </view>
                      </view>
                    <viewstyle={{flexdirection:'row',margintop:10}}>
                      <view style="{{width:70}}">
                         <img source="{require('./img/six.png')}" style="{styles.imageStyle}">
                         <text style="{styles.textStyle}">{titles_first_data[5]}</text>
                      </view>
                      <view style="{{width:70}}">
                         <img source="{require('./img/seven.png')}" style="{styles.imageStyle}">
                         <text style="{styles.textStyle}">{titles_first_data[6]}</text>
                     </view>
                     <view style="{{width:70}}">
                         <img source="{require('./img/eight.png')}" style="{styles.imageStyle}">
                         <text style="{styles.textStyle}">{titles_first_data[7]}</text>
                     </view>
                     <view style="{{width:70}}">