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属性
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’ 。该属性代表当前选中的页面的索引值。
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);
- LVS+Keepalived负载均衡主备&双主架构全攻略
- ASM 翻译系列第二十八弹:ASM INTERNAL Partnership and Status Table
- ASM 翻译系列第二十九弹:ASM INTERNAL Free Space Table
- MySql常用30种SQL查询语句优化方法
- RxJS速成
- 会HTML/CSS就可以轻松创建网站
- 区块链银行应用探索(Hyperledger fabric)
- mysql之基本语法
- mysql之索引的工作机制
- Mysql之锁与事务
- 独家 | 教你实现数据集多维可视化(附代码)
- NoSQL | Redis、Memcache、MongoDB特点、区别以及应用场景
- cf--------(div1)1A. Theatre Square
- 离线网页制作器(beta1.0)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux下使用 github+hexo 搭建个人博客03-hexo配置优化
- 接口测试框架实战(五) | 测试数据的数据驱动
- Linux下使用 github+hexo 搭建个人博客04-next主题优化
- Linux下使用 github+hexo 搭建个人博客05-next主题接入评论系统 来必力畅言Valine获取 livere_uid在Next主题配置浏览器访问数据
- Linux下使用 github+hexo 搭建个人博客06-next主题接入数据统计
- egg.js 动态转发代理
- Linux下使用 github+hexo 搭建个人博客07-next主题接入搜索和站点管理
- Linux curl 命令详解
- Linux curl 常用示例
- Linux curl 表单登录或提交与cookie使用
- Rsync 服务部署与参数详解
- Linux 查看磁盘IO并找出占用IO读写很高的进程
- Linux tcpdump 命令详解与示例
- 手动搭建Hadoop分布式集群
- Ansible-安装配置