概述

今天我们来讲解一下关于 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);

React Native之ViewPagerAndroid 组件的更多相关文章

  1. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

  2. React Native之倒计时组件的实现(ios android)

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

  3. React Native知识6-NavigatorIOS组件

    NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...

  4. React Native知识2-Text组件

    Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...

  5. react native 之子组件和父组件之间的通信

    react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...

  6. React Native 系列(五) -- 组件间传值

    前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...

  7. React Native之Image组件

    同 HTML 的 img 元素一样,React Native 提供的 Image 组件可以用来显示各种途径的图片,比如网络图片.本地图片.照相机图片等. 虽然效果是一样的.然而用法还是有区别的. 1. ...

  8. react native 封装TextInput组件

    上一篇 react-native文章提到了TextInput组件对安卓的适配问题,因此对该组件进行封装很有必要. 文章地址  react native定报预披项目知识点总结 TextInput介绍 官 ...

  9. React Native之常用组件(View)

    一. JSX和组件的概念 React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能.传统的创建方式是: 但这样的代码可读性 ...

随机推荐

  1. 阿里云在RSAC 2018上宣布 将在西雅图建立安全实验室

    日前,2018年度的RSA Conference全球信息安全大会在美国加州旧金山市召开.作为全球三大云计算服务商之一,阿里云携3款全新安全产品亮相,并宣布今年将在西雅图设立全新的安全实验室,整合全球安 ...

  2. 机器学习技法:14 Radial Basis Function Network

    Roadmap RBF Network Hypothesis RBF Network Learning k-Means Algorithm k-Means and RBF Network in Act ...

  3. mser 最大稳定极值区域(文字区域定位)算法 附完整C代码

    mser 的全称:Maximally Stable Extremal Regions 第一次听说这个算法时,是来自当时部门的一个同事, 提及到他的项目用它来做文字区域的定位,对这个算法做了一些优化. ...

  4. 基于webpack的React项目搭建(三)

    前言 搭建好前文的开发环境,已经可以进行开发.然而实际的项目中,不同环境有着不同的构建需求.这里就将开发环境和生产环境的配置单独提取出来,并做一些简单的优化. 分离不同环境公有配置 不同环境虽然有不同 ...

  5. StopAllSounds

    10月3日,在杭州市西湖景区,一只小松鼠不停地接受一道道食物,花生.玉米.饼干,可谓来者不拒,憨态可掬的模样吸引了众多围观者...Description   小松鼠开心地在树之间跳跃着,突然她停了下来 ...

  6. [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 " ...

  7. Ubuntu 16.04 Vim安装及配置【转】

    转自:http://www.cnblogs.com/ace-wu/p/6273031.html 安装VIM 默认已经安装了VIM-tiny acewu@acewu-computer:~$ locate ...

  8. Mysq 索引优化

    MYSQL支持的索引类型 BTREE索引 特点: 通过引用以B+权的结构存储数据 能够加快数据的查询速度 更适合进行范围查找 应用: 全值匹配的查询 = 匹配最左前缀的查询 匹配列前缀查询 LIKE ...

  9. jQuery Datetable 渲染

    渲染器 有些情况下,使用表时,表中的行的数据源不包含您希望在表中直接显示的值.您可能希望将其转换为不同的表示形式(时间戳为人类可读的格式),合并数据点(名字和姓氏)或对该值执行一些计算(计算营业额和费 ...

  10. WebService接口与HTTP接口的联系

    1 WebService有很多协议,为什么HTTP比较流行? WebService是个很重型的规范,它的应用协议是SOAP(简单对象访问协议),它所依赖的下层通信方式不单单是HTTP,也有SOAP o ...