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);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

Vue-自定义事件之—— 子组件修改父组件的值

3575
来自专栏hightopo

原 基于HTML5 Canvas 点击添加

1424
来自专栏前端说吧

vue.js: 自定义事件之—— 子组件修改父组件的值

这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module

4684
来自专栏IT派

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

2481
来自专栏静默虚空的博客

jQuery 事件

什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见 DOM 事件: 鼠标事件 ...

2207
来自专栏前端说吧

Css中Position定位属性与层级关系

2995
来自专栏互联网杂技

React中的-- 数据流

简介 React的组件简单理解起来其实就是一个函数,这个函数会接收props和state作为参数,然后进行相应的逻辑处理,最终返回该组件的虚拟DOM展现。在Re...

3549
来自专栏DeveWork

Web 前端利器Emmet 的CSS 用法总结

承接上文《Web 前端利器Emmet 的HTML用法总结》,这篇主要是Emmet 的 html的好基友——CSS 的用法。原文来自tutsplus,由w3cpl...

1965
来自专栏大前端_Web

Vue与React的异同-组件(二)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1332
来自专栏Albert陈凯

Markdown 语法和 MWeb 写作使用说明既然都整理了,捎带手把这个也整理了吧第一级标题<h1>

既然都整理了,捎带手把这个也整理了吧 快捷键汇总 预览 CMD + R 在 MWeb 中的快捷键为: 标题快捷键:Control + 1 -- Control ...

3687

扫码关注云+社区

领取腾讯云代金券