React Native控件之ViewPagerAndroid讲解

于 2016-07-07 23:38:01 发布
阅读量1.5k 收藏
点赞数
分类专栏： React Native专题学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u014484863/article/details/51855199
版权
本文详述了React Native的ViewPagerAndroid组件，它模仿了Android原生的ViewPager。内容包括ViewPagerAndroid的作用、属性（如initialPage、keyboardDismissMode）、方法（setPage、setPageWithoutAnimation）以及一个仿美团顶部分类切换的实例。强调了所有子View必须是< View>，并且提供了页面滑动回调的相关参数解析。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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={require('./img/two.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_first_data[1]}</Text>
              </View>
              <View style={{width:70}}>
                 <Image source={require('./img/three.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_first_data[2]}</Text>
              </View>
              <View style={{width:70}}>
                 <Image source={require('./img/four.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_first_data[3]}</Text>
              </View>
              <View style={{width:70}}>
                 <Image source={require('./img/five.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_first_data[4]}</Text>
              </View>
              </View>
            <View style={{flexDirection:'row',marginTop:10}}>
              <View style={{width:70}}>
                 <Image source={require('./img/six.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_first_data[5]}</Text>
              </View>
              <View style={{width:70}}>
                 <Image source={require('./img/seven.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_first_data[6]}</Text>
             </View>
             <View style={{width:70}}>
                 <Image source={require('./img/eight.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_first_data[7]}</Text>
             </View>
             <View style={{width:70}}>
                 <Image source={require('./img/nine.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_first_data[8]}</Text>
             </View>
             <View style={{width:70}}>
                 <Image source={require('./img/ten.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_first_data[9]}</Text>
              </View>
            </View>
          </View>
           <View>
             <View style={{flexDirection:'row'}}>
             <View style={{width:70}}>
                 <Image source={require('./img/next_one.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_second_data[0]}</Text>
             </View>
              <View style={{width:70}}>
                 <Image source={require('./img/next_two.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_second_data[1]}</Text>
             </View>
             <View style={{width:70}}>
                 <Image source={require('./img/next_three.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_second_data[2]}</Text>
             </View>
             <View style={{width:70}}>
                 <Image source={require('./img/next_four.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_second_data[3]}</Text>
             </View>
             <View style={{width:70}}>
                 <Image source={require('./img/next_five.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_second_data[4]}</Text>
             </View>
          </View>
          <View style={{flexDirection:'row',marginTop:10}}>
             <View style={{width:70}}>
                 <Image source={require('./img/next_six.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_second_data[5]}</Text>
             </View>
              <View style={{width:70}}>
                 <Image source={require('./img/next_seven.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_second_data[6]}</Text>
             </View>
             <View style={{width:70}}>
                 <Image source={require('./img/next_eight.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_second_data[7]}</Text>
             </View>
             <View style={{width:70}}>
                 <Image source={require('./img/next_nine.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_second_data[8]}</Text>
             </View>
             <View style={{width:70}}>
                 <Image source={require('./img/next_ten.png')} style={styles.imageStyle} />
                 <Text style={styles.textStyle}>{titles_second_data[9]}</Text>
             </View>
            </View>
          </View>
        </ViewPagerAndroid>
        <Text style={{flex:1,alignSelf:'center'}}>当前第{this.state.page}页</Text>
      </View>
    );
   },
});
const styles = StyleSheet.create({
   container: {
     justifyContent:'center',
     alignItems:'center',
     backgroundColor:'white',
     flex: 1 
   },
   pageStyle: {
     marginTop:10,
     alignItems: 'center',
     height:150,
   },
   textStyle:{
     marginTop:5,
     alignSelf:'center',
     fontSize:11,
     color:'#555555',
     textAlign:'center',
   },
   imageStyle:{
     alignSelf:'center',
     width:45,
     height:45,
   },
});
AppRegistry.registerComponent('PerfectProject',() => PerfectProject);

运行效果如下：
这里写图片描述

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值