基础篇章:关于 React Native 之 ViewPagerAndroid 组件的讲解

今天我们来讲解一下关于 ViewPager 的使用,它是一个允许子视图左右滚动翻页的容器。而且每一个 ViewPagerAndroid 的子容器会被视作一个单独的页,并且会被拉伸填满整个 ViewPagerAndroid。

特别注意:ViewPagerAndroid 中所有的子视图必须是,必须是,必须是纯 View 组件,不能是复合的容器和组件。我们可以给每个子视图设置样式,比如:padding 或者 backgroundColor 。

来,我们看一看 ViewPagerAndroid 有哪些属性或者方法呢?

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代表禁止滚动。

我们熟悉了这些属性和函数之后,那就应该实践了,其实实践这些东西都很简单,当然代码这东西看起来简单,自己写起来可能就会有问题,所以我们行动来来,做一个实例吧。

代码实例

来,我们在看代码前,看看例子的效果图,还是那句话:得自己尝试的去敲一遍代码实现,看一遍不管用。效果图如下:

实例代码

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

原文发布于微信公众号 - 非著名程序员(non-famous-coder)

原文发表时间:2016-12-01

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程语言

Python:pygame的初步使用

4.创建窗口,pygame.display.set_mode(resolution=(0,0),flags=0,depth=0),resolution窗口大小,...

740
来自专栏GreenLeaves

JavaScript图片库

将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是,如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数...

2176
来自专栏cnblogs

DOM事件第一弹

     近期温习了部分w3c上关于DOM事件的规范,发现以前有些模糊的概念更加清晰,以及受到罗胖(罗辑思维)的影响,很是想分享自己的了解的东西,希望大家给予指...

1976
来自专栏一个会写诗的程序员的博客

JQuery中bind和unbind函数

测试: 页面代码: <body> <input type="button" name="aaa" value="点击我"> <input type="c...

1532
来自专栏我有一个梦想

ClistCtrl用法及总结(由怎样隐藏ListCtrl列表头的排序小三角形这个bug学习到的知识)

1 怎样隐藏ListCtrl列表头的排序小三角形 在创建控件是加入|LVS_NOSORTHEADER风格即可。 一下是用法总结: 本文根据本人在项目中的应用,来...

2935
来自专栏偏前端工程师的驿站

HTML5魔法堂:全面理解Drag & Drop API

一、前言                                      在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML...

26710
来自专栏HT

基于HT for Web矢量实现HTML5文件上传进度条

在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传、上传成功了没有,所以今天给大家介绍的内容是通过HT...

2039
来自专栏技术墨客

React Forwarding高阶组件传递Refs

通常情况下,我们想获取一个组建或则一个HTML元素的实例通过 Ref特性 就可以实现,但是某些时候我们需要在子父级组建中传递使用实例,Forwarding Re...

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

jQuery 事件

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

2197
来自专栏Flutter知识集

Flutter实现雨滴动画

写了几个Flutter的demo,但是对Flutter的自定义view和动画都不太了解,看到一个类似效果在android的实现,就尝试用Flutter做一下。同...

6434

扫码关注云+社区