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的操作从而提升性能.传统的创建方式是: 但这样的代码可读性 ...
随机推荐
- 阿里云在RSAC 2018上宣布 将在西雅图建立安全实验室
日前,2018年度的RSA Conference全球信息安全大会在美国加州旧金山市召开.作为全球三大云计算服务商之一,阿里云携3款全新安全产品亮相,并宣布今年将在西雅图设立全新的安全实验室,整合全球安 ...
- 机器学习技法:14 Radial Basis Function Network
Roadmap RBF Network Hypothesis RBF Network Learning k-Means Algorithm k-Means and RBF Network in Act ...
- mser 最大稳定极值区域(文字区域定位)算法 附完整C代码
mser 的全称:Maximally Stable Extremal Regions 第一次听说这个算法时,是来自当时部门的一个同事, 提及到他的项目用它来做文字区域的定位,对这个算法做了一些优化. ...
- 基于webpack的React项目搭建(三)
前言 搭建好前文的开发环境,已经可以进行开发.然而实际的项目中,不同环境有着不同的构建需求.这里就将开发环境和生产环境的配置单独提取出来,并做一些简单的优化. 分离不同环境公有配置 不同环境虽然有不同 ...
- StopAllSounds
10月3日,在杭州市西湖景区,一只小松鼠不停地接受一道道食物,花生.玉米.饼干,可谓来者不拒,憨态可掬的模样吸引了众多围观者...Description 小松鼠开心地在树之间跳跃着,突然她停了下来 ...
- [USACO17FEB]Why Did the Cow Cross the Road I S
题目描述 Farmer John's cows are trying to learn to cross the road effectively. Remembering the old " ...
- Ubuntu 16.04 Vim安装及配置【转】
转自:http://www.cnblogs.com/ace-wu/p/6273031.html 安装VIM 默认已经安装了VIM-tiny acewu@acewu-computer:~$ locate ...
- Mysq 索引优化
MYSQL支持的索引类型 BTREE索引 特点: 通过引用以B+权的结构存储数据 能够加快数据的查询速度 更适合进行范围查找 应用: 全值匹配的查询 = 匹配最左前缀的查询 匹配列前缀查询 LIKE ...
- jQuery Datetable 渲染
渲染器 有些情况下,使用表时,表中的行的数据源不包含您希望在表中直接显示的值.您可能希望将其转换为不同的表示形式(时间戳为人类可读的格式),合并数据点(名字和姓氏)或对该值执行一些计算(计算营业额和费 ...
- WebService接口与HTTP接口的联系
1 WebService有很多协议,为什么HTTP比较流行? WebService是个很重型的规范,它的应用协议是SOAP(简单对象访问协议),它所依赖的下层通信方式不单单是HTTP,也有SOAP o ...