React Native之ViewPagerAndroid 组件
来源:互联网 发布:mac iphone 铃声 编辑:程序博客网 时间:2024/05/01 05:09
概述
今天我们来讲解一下关于 ViewPager 的使用,它是一个允许子视图左右滚动翻页的容器。我们知道在Android开发中系统有ViewPager这个组件,作用是实现滚动翻页的,在RN中也是有这么一个组件的(ViewPagerAndroid),每一个ViewPagerAndroid的子容器会被视作一个单独的页,并且会被拉伸填满ViewPagerAndroid。
我们来看一段官方给出的例子:
render: function() { return ( <ViewPagerAndroid style={styles.viewPager} initialPage={0}> <View style={styles.pageStyle}> <Text>First page</Text> </View> <View style={styles.pageStyle}> <Text>Second page</Text> </View> </ViewPagerAndroid> );}...var styles = { ... pageStyle: { alignItems: 'center', padding: 20, }}
写法很简单,通过标签来包裹控件,然后里面添加相应的属性。ViewPagerAndroid属性
initialPage number 顾名思义:初始索引页,当然我们也可以通过 setPage 函数来翻页,还可以通过 onPageSelected 方法来监听页面的滑动。
keyboardDismissMode enum(‘none’, “on-drag”) 这个还是很人性化的,就是监听在滑动的时候是否隐藏软键盘。
none : 默认值,意思是不会隐藏消失
on-drag : 当拖拽滑动时软键盘消失
onPageScroll function 当在页面间滑动切换时(不管是动画还是由于用户在页间滑动或者拖拽)执行。
回调参数中的event.nativeEvent对象会包含如下数据:
position 从左数起第一个当前可见的页面的下标。
offset 一个在[0,1)(大于等于0,小于1)之间的范围,代表当前页面切换的状态。值x表示现在”position”所表示的页有(1 - x)的部分可见,而下一页有x的部分可见。]
onPageScrollStateChanged function 顾名思义:当页面滑动状态变化时调用这个函数,页面滑动的状态有三种:
idle : 无交互时,空闲状态
dragging : 拖拽滑动中,意思是页面正在拖拽当中
settling : 处理中,意味着当前页面发生过交互,且正在结束开头或收尾的动画。
onPageSelected function 上面我们提到过,这个函数是当页面切换完成后调用。该方法回调参数中的event.nativeEvent对象会携带一个属性 : ‘position’ 。该属性代表当前选中的页面的索引值。
keyboardDismissMode enum(‘none’, “on-drag”) 这个还是很人性化的,就是监听在滑动的时候是否隐藏软键盘。
none : 默认值,意思是不会隐藏消失
on-drag : 当拖拽滑动时软键盘消失
onPageScroll function 当在页面间滑动切换时(不管是动画还是由于用户在页间滑动或者拖拽)执行。
回调参数中的event.nativeEvent对象会包含如下数据:
position 从左数起第一个当前可见的页面的下标。
offset 一个在[0,1)(大于等于0,小于1)之间的范围,代表当前页面切换的状态。值x表示现在”position”所表示的页有(1 - x)的部分可见,而下一页有x的部分可见。]
onPageScrollStateChanged function 顾名思义:当页面滑动状态变化时调用这个函数,页面滑动的状态有三种:
idle : 无交互时,空闲状态
dragging : 拖拽滑动中,意思是页面正在拖拽当中
settling : 处理中,意味着当前页面发生过交互,且正在结束开头或收尾的动画。
onPageSelected function 上面我们提到过,这个函数是当页面切换完成后调用。该方法回调参数中的event.nativeEvent对象会携带一个属性 : ‘position’ 。该属性代表当前选中的页面的索引值。
scrollEnabled bool 布尔值,true是默认是,可以滑动,false代表禁止滚动。
ViewPagerAndroid实例
为了更好的理解,我们自己实现一个实例,效果如下:
import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, ViewPagerAndroid, TouchableOpacity, Image, View} from 'react-native';var PAGES = 2;var IMAGE_URIS = [ 'http://apod.nasa.gov/apod/image/1410/20141008tleBaldridge001h990.jpg', 'http://apod.nasa.gov/apod/image/1409/volcanicpillar_vetter_960.jpg',];export default class ViewPagerDemo extends Component { state={page:0, }; render() { var pages = []; for(let i = 0;i < PAGES;i++){pages.push( <View key={i} collapsable={false}> <TouchableOpacity activeOpacity={1} onPress={this.onPress} ><Image style={styles.image} source={{uri:IMAGE_URIS[i]}}></Image></TouchableOpacity> </View>); }return ( <View style={styles.container}><ViewPagerAndroid style={styles.viewPager}initialPage={0}onPageSelected={this.onPageSelected}>{pages}</ViewPagerAndroid><Text style={{flex:1,alignSelf:'center'}}>当前第{this.state.page+1}页</Text> </View>); } onPageSelected=(e)=>{this.setState({page:e.nativeEvent.position}); } onPress=()=>{alert('第'+(this.state.page+1)+'页被点击了'); }}const styles = StyleSheet.create({ container: {flex: 1,backgroundColor: '#F5FCFF', }, image: {height: 200,padding: 20, }, viewPager: {flex: 1, },});AppRegistry.registerComponent('ViewPagerDemo', () => ViewPagerDemo);
0 1
- React Native之ViewPagerAndroid 组件
- React Native之ViewPagerAndroid 组件
- React Native控件之ViewPagerAndroid讲解
- React Native之ViewPagerAndroid讲解与应用
- react-native-ViewPagerAndroid
- React Native ViewPagerAndroid使用小结
- react native ViewPagerAndroid 使用详解
- React Native]React Native组件之Navigator
- 【React Native开发】React Native控件之ViewPagerAndroid讲解以及美团首页顶部效果实例(17)
- React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现
- React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现
- React Native组件之Text
- React Native 组件之Image
- React Native 组件之TextInput
- React Native组件之Button
- React-Native 组件之 Modal
- [深入剖析React Native]React Native组件之Touchable*
- [深入剖析React Native]React Native组件之Navigator
- android开发 -- 复制文本内容到系统剪贴板(自由复制)
- 顺序表的动态存储细节
- 头戴式眼动仪求解映射方法
- 二维数组地址的计算
- java socket通信 从客户端传数字到服务器动态显示
- React Native之ViewPagerAndroid 组件
- Tensorflow实现softmax回归
- memcache在ThinkPHP中的使用1---PHP下安装memcache
- struts的DevMode模式
- hbase架构与原理
- java面向对象梳理一
- 11 :外网如何访问 docker 容器内的服务?
- Python学习记录(计算机基础操作)
- 第十五周 项目1--验证算法--(1)哈希表