React Native之ViewPagerAndroid 组件
概述
今天我们来讲解一下关于 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属性
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’ 。该属性代表当前选中的页面的索引值。
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);
React Native之ViewPagerAndroid 组件的更多相关文章
- react native之组织组件
这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...
- React Native之倒计时组件的实现(ios android)
React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...
- React Native知识6-NavigatorIOS组件
NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...
- React Native知识2-Text组件
Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...
- react native 之子组件和父组件之间的通信
react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...
- React Native 系列(五) -- 组件间传值
前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...
- React Native之Image组件
同 HTML 的 img 元素一样,React Native 提供的 Image 组件可以用来显示各种途径的图片,比如网络图片.本地图片.照相机图片等. 虽然效果是一样的.然而用法还是有区别的. 1. ...
- react native 封装TextInput组件
上一篇 react-native文章提到了TextInput组件对安卓的适配问题,因此对该组件进行封装很有必要. 文章地址 react native定报预披项目知识点总结 TextInput介绍 官 ...
- React Native之常用组件(View)
一. JSX和组件的概念 React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能.传统的创建方式是: 但这样的代码可读性 ...
随机推荐
- openSUSE虚拟机安装并连接Xshell
- mysql之子查询作业
#数据准备drop table if exists class;create table class( class_no int(2) unsigned zerofill primary key ...
- 关于Go 的 Interface
最近在用Go语言写程序, 其中遇到一个场景:写了一个接口,3个实现接口的struct. 另外一个struct包含此接口,根据构造函数赋予不同的结构实现. 一开始struct里写的是接口的地址,但是在创 ...
- vba打开输入文件
Sub fileCreate2() Dim folderPath, fileName, s As String Dim fs, fo, fc, f As Object folderPath = &qu ...
- 生物分子gene
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAswAAAHoCAYAAABdBLmnAAAgAElEQVR4nOzdB5gsRfU+/kZyTiIgCJ
- SQL Server 连接 MySQL
1.在SQL SERVER服务器上安装MYSQL ODBC驱动; 驱动下载地址:http://dev.mysql.com/downloads/connector/odbc/ 2.安装好后,在管理工具- ...
- C# 枚举在项目中使用心得
阅读目录 基本介绍 使用注意 使用方法 扩展用法 本文主要是我在项目中对C#枚举的使用心得,如有不足的地方欢迎您指出. 一.基本介绍 枚举是由一组特定常量构成的一组数据结构,是值类型的一种特 ...
- Windows Server2003本地用户的批量导入和导出(转)
AD域环境的用户导入和导出 Windows server 2003 批量导入用户---CSVDE 在新搭建的域环境中,有许多的域帐号需要导入,可以采用csvde命令来导入域用户:新建一个txt文本文件 ...
- gulp填坑记(二)——gulp多张图片自动合成雪碧图
为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面,对于一些图片较多的项目,这个过程可能要花费我们一天的时 ...
- php判断浏览器是不是IE
1.$_SERVER['HTTP_USER_AGENT']和strpos 2.打印结果 谷歌: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) Appl ...