ReactNative的ViewPagerAndroid简述

分类：React作者：编程之家用户

ViewPager是Android中比较常见的页面切换控件,同时,在UIExplorerApp中也有ViewPagerAndroid的示例. 通过使用这个控件,理解ReactNative的实现逻辑. 我们现在来分析一下ViewPager的使用方式和ReactNative的编程要点,本文注释也很清晰.

效果

1. 准备

新建ReactNative的项目.

npm install -g react-native-cli
react-native init [TestViewPager]

-g是全局,react-native-cli是react-native的命令行工具(command line interface). 安装需要管理员权限(sudo),安装一次即可,使用react-native命令. 参考.

修改项目架构,主页直接跳转至ViewPager模块.

'use strict';

var React = require('react-native');

var {
  AppRegistry,} = React;

var ViewPagerModule = require('./ViewPagerModule/index')

AppRegistry.registerComponent('TestViewPager',() => ViewPagerModule);

2. 概述

ViewPager包含若干滑动页面; 点赞选项-模拟页面交互; 按键和滚动条-模拟滚动监听.

'use strict'

var React = require('react-native');

var {
  View,Text,Image,TouchableNativeFeedback,// 触碰响应
  TouchableOpacity,// 触碰更换透明度的属性
  ViewPagerAndroid,// Android的ViewPager
} = React;

// Styles
var styles = require('./style');

var PAGES = 5; // 页数

// 颜色
var BGCOLOR = ['#8ad3da','#eecde2','#e682b4','#b7badd','#f1c7dd'];

// 本地图片地址
var IMAGE_URIS = [
  require('./images/jessicajung.png'),require('./images/tiffany.png'),require('./images/seohyun.png'),require('./images/taeyeon.png'),require('./images/yoona.png'),];

// 名称
var NAMES = ['Jessica','Tiffany','Seohyun','Taeyeon','Yoona'];

/** * 点赞功能页面 * @param {likes: 点赞数} * @return {点赞视图} [点赞按钮,动态增加点赞数] */
var LikeCount = React.createClass({
  // 初始化状态
  getInitialState: function() {
    return {
      likes: 0,};
  },// 点击增加
  onClick: function() {
    this.setState({likes: this.state.likes + 1});
  },render: function() {
    var thumbsUp = '\uD83D\uDC4D'; // 图标
    return (
      <View style = {styles.likeContainer}>
        <TouchableOpacity
          onPress={this.onClick}
          style={styles.likeButton}>
          <Text style={styles.likesText}>
            {thumbsUp}
          </Text>
        </TouchableOpacity>
        <Text style={styles.likesText}>
          {this.state.likes + ' 喜欢'}
        </Text>
      </View>
    );
  },});

/** * 按钮: 添加点击状态(enabled)和文本(text) * @param {enabled:点击状态} {text:显示文本} {onPress:点击事件} * @return {TouchableNativeFeedback} [触摸反馈的视图] */
var Button = React.createClass({
  _handlePress: function() {
    if (this.props.enabled && this.props.onPress) {
      this.props.onPress();
    }
  },render: function() {
    return (
      <TouchableNativeFeedback onPress={this._handlePress}>
        <View style={[styles.button,this.props.enabled ? {} : styles.buttonDisabled]}>
          <Text style={styles.buttonText}>
            {this.props.text}
          </Text>
        </View>
      </TouchableNativeFeedback>
    );
  }
});

/** * 滚动条,fractionalPosition滚动条长度,progressBarSize当前大小 * @param {size:滚动条大小} {progress:过程} * @return {View} [里外两层视图,背景白框黑底,显示白框] */
var ProgressBar  = React.createClass({
  render: function() {
    var fractionalPosition = (this.props.progress.position + this.props.progress.offset);
    var progressBarSize = (fractionalPosition / (PAGES - 1)) * this.props.size;
    return (
      <View style={[styles.progressBarContainer,{width: this.props.size}]}>
        <View style={[styles.progressBar,{width: progressBarSize}]}/>
      </View>
    );
  }
});


var ViewPagerModule = React.createClass({

  /** * 初始化状态 * @return {状态} [页面] */
  getInitialState: function() {
    return {
      page: 0,// 当前位置
      progress: { // Progress位置
        position: 0,offset: 0,}
    };
  },// 页面选择
  onPageSelected: function(e) {
    this.setState({page: e.nativeEvent.position});
  },// 页面滚动
  onPageScroll: function(e) {
    this.setState({progress: e.nativeEvent});
  },// 移动页面
  move: function(delta) {
    var page = this.state.page + delta;
    this.go(page);
  },// 跳转页面
  go: function(page) {
    this.viewPage.setPage(page);
    this.setState({page});
  },render: function() {
    var pages = [];

    for (var i=0; i<PAGES; i++) {
      // 背景
      var pageStyle = {
        backgroundColor: BGCOLOR[i % BGCOLOR.length],alignItems: 'center',padding: 20,}

      pages.push(
        <View
          key={i}
          style={pageStyle}
          collapsable={false}>
          <Image
            style={styles.image}
            resizeMode={'cover'}
            source={IMAGE_URIS[i%PAGES]}
            />
          <Text style={styles.nameText}>
            {NAMES[i%PAGES]}
          </Text>
          <LikeCount />
        </View>
      );
    }
    var {page} = this.state;

    return (
      <View style={styles.container}>
        <ViewPagerAndroid
          style={styles.viewPager}
          initialPage={0}
          onPageScroll={this.onPageScroll}
          onPageSelected={this.onPageSelected}
          ref={viewPager => {this.viewPage = viewPager;}}>
          {pages}
        </ViewPagerAndroid>

        <View style={styles.buttons}>
          <Button
            text="首页"
            enabled={page > 0}
            onPress={() => this.go(0)}/>
          <Button
            text="上一页"
            enabled={page > 0}
            onPress={() => this.move(-1)}/>
          <Text style={styles.buttonText}>
            页 {page+1} / {PAGES}
          </Text>
          {/*进度条*/}
          <ProgressBar
            size={80}
            progress={this.state.progress}/>
          <Button
            text="下一页"
            enabled={page < PAGES - 1}
            onPress={() => this.move(1)}/>
          <Button
            text="尾页"
            enabled={page < PAGES - 1}
            onPress={() => this.go(PAGES -1)}/>
        </View>
      </View>
    );
  },});

module.exports = ViewPagerModule;

引入RN的原生模块

var {
  View,// Android的ViewPager
} = React;

TouchableNativeFeedback,接触时会受到原生的响应; TouchableWithoutFeedback,接触时无响应. TouchableOpacity,接触时会改变透明度. 在加入onclick方法时,可以模拟按钮视图.

定义控件: LikeCount点赞,Button按钮,ProgressBar滚动条.

3. 点赞(LikeCount)控件

likes存储喜欢的数量. 点击时,更新数量状态,刷新页面. 其中,喜欢按钮是触碰控件,在接触时会改变透明度(Opacity).

/** * 点赞功能页面 * @param {likes: 点赞数} * @return {点赞视图} [点赞按钮,});

直接调用,即可使用.

<LikeCount />

state的like属性,仅仅作用于当前页面,每次更新时刷新.
注意: 一定要谨慎使用全局state,这样会刷新整个页面,影响效率.

4. 按钮(Button)控件

添加使用状态,是否可以点击,根据状态修改视图样式和点击回调.

/** * 按钮: 添加点击状态(enabled)和文本(text) * @param {enabled:点击状态} {text:显示文本} {onPress:点击事件} * @return {TouchableNativeFeedback} [触摸反馈的视图] */
var Button = React.createClass({
  _handlePress: function() {
    if (this.props.enabled && this.props.onPress) {
      this.props.onPress();
    }
  },this.props.enabled ? {} : styles.buttonDisabled]}>
          <Text style={styles.buttonText}>
            {this.props.text}
          </Text>
        </View>
      </TouchableNativeFeedback>
    );
  }
});

在RN中,并没有提供Button视图,可以使用Touchable类的视图,设置点击事件,如TouchableNativeFeedback,根据状态,修改按钮的样式和点击. 注意: props表示属性,在使用视图时提供.

使用Button,设置text显示,enabled状态,onPress点击事件. 

<Button
            text="首页"
            enabled={page > 0}
            onPress={() => this.go(0)}/>

5. 滚动条(ProgressBar)控件

主要监听ViewPager的滚动事件,这和Android的滚动非常类似,fractionalPosition是偏移比例,progressBarSize是偏移量.

/** * 滚动条,{width: progressBarSize}]}/>
      </View>
    );
  }
});

控件需要设置ProgressBar的属性progress(滚动位置)和size(大小).

使用控件,属性: size大小; progress进度状态,其中position是位置,offset是偏移.

progress: { // Progress位置
        position: 0,}
      ...
          <ProgressBar
            size={80}
            progress={this.state.progress}/>

注意: progress是主页面属性,重置状态时,刷新全部页面.

6. ViewPager页面

根据页面定制属性,根据页面ID设置不同图片和文字.

 for (var i=0; i<PAGES; i++) { // 背景 var pageStyle = { backgroundColor: BGCOLOR[i % BGCOLOR.length],alignItems: 'center',padding: 20,} pages.push( <View key={i} style={pageStyle} collapsable={false}> <Image  style={styles.image} resizeMode={'cover'} source={IMAGE_URIS[i%PAGES]} /> <Text style={styles.nameText}> {NAMES[i%PAGES]} </Text> <LikeCount /> </View> ); }

注意设置图片资源时,
使用IMAGE_URIS =['xxx.png']和require(IMAGE_URIS[i%PAGES])会显示模块丢失.
在数组IMAGE_URIS使用require('./images/jessicajung.png')加载source就可以.
思考很久的问题…

ViewPager页面

 <View style={styles.container}> <ViewPagerAndroid  style={styles.viewPager} initialPage={0} onPageScroll={this.onPageScroll} onPageSelected={this.onPageSelected} ref={viewPager => {this.viewPage = viewPager;}}> {pages} </ViewPagerAndroid> <View style={styles.buttons}> <Button  text="首页" enabled={page > 0} onPress={() => this.go(0)}/> <Button  text="上一页" enabled={page > 0} onPress={() => this.move(-1)}/> <Text style={styles.buttonText}> 页 {page+1} / {PAGES} </Text> {/*进度条*/} <ProgressBar  size={80} progress={this.state.progress}/> <Button  text="下一页" enabled={page < PAGES - 1} onPress={() => this.move(1)}/> <Button  text="尾页" enabled={page < PAGES - 1} onPress={() => this.go(PAGES -1)}/> </View> </View>

使用方法,监听ViewPagerAndroid的事件,onPageScroll页面滚动,onPageSelected页面选择,按钮关联页面. 核心在于go方法,设置state的viewPage页.

// 跳转页面
  go: function(page) {
    this.viewPage.setPage(page);
    this.setState({page});
  },

7. Styles

引入styles,使用独立文件.

// Styles
var styles = require('./style');

样式

'use strict';

var React = require('react-native');

var {
  StyleSheet,} = React;

var styles = StyleSheet.create({
  buttons: {
    flexDirection: 'row',height: 40,backgroundColor: 'pink',justifyContent: 'space-between',},// 按钮可点击状态
  button: {
    flex: 1,width: 0,margin: 2,borderColor: 'gray',borderWidth: 1,backgroundColor: 'gray',// 按钮非点击装
  buttonDisabled: {
    backgroundColor: 'black',opacity: 0.5,buttonText: {
    fontSize: 12,color: 'white',textAlign: 'center',// 文字显示
  nameText: {
    fontSize: 16,margin: 4,container: {
    flex: 1,backgroundColor: 'white',image: {
    flex: 1,width: 300,likeButton: {
    backgroundColor: 'rgba(0,0.1)',borderColor: '#333333',borderRadius: 5,flex: 1,margin: 8,padding: 8,likeContainer: {
    flexDirection: 'row',likesText: {
    flex: 1,fontSize: 18,alignSelf: 'center',progressBarContainer: {
    height: 10,margin: 5,borderColor: '#eeeeee',borderWidth: 2,progressBar: {
    alignSelf: 'flex-start',backgroundColor: '#eeeeee',viewPager: {
    flex: 1,});

module.exports = styles;

里面包含各个控件的样式,主要使用了Flex+RN的Style.

动画效果

动画

Github下载地址

OK,通过实现简单的ViewPagerAndroid学习了很多知识.

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如果组件之中有复用的代码，需要重新创建一个父类，父类中存储公共代码，返回子类，同时把公用属性...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 re...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层，一个是调...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使用，可能是不了解。我公司的项目就没有使用，但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接触 react 就一直使用 mobx 库，上手简单不复杂。
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。但是对于大量的列表渲染，特别像有实时数据...
react 学习(六) 函数组件实例及类组件生命周期
本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们...
mini react-window(二) 实现可知变化高度虚拟列表
上一小节我们了解了固定高度的滚动列表实现，因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到，这种场景也适合我们常见的大部分场景，例如...
react 学习(五) 完善 setState 及实现 ref
上一小节我们处理了 setState 的批量更新机制，但是我们有两个遗漏点，一个是源码中的 setState 可以传入函数，同时 setState 可以传入第二...
react 学习13实现 PureComponent
我们知道 react 进行页面渲染或者刷新的时候，会从根节点到子节点全部执行一遍，即使子组件中没有状态的改变，也会执行。这就造成了性能不必要的浪费。之前我们了解...
react学习(十) React 中的 context
在平时工作中的某些场景下，你可能想在整个组件树中传递数据，但却不想手动地通过 props 属性在每一层传递属性，contextAPI 应用而生。
react 学习(一) 实现简版虚拟 dom 和挂载
楼主最近入职新单位了，恰好新单位使用的技术栈是 react，因为之前一直进行的是 vue2/vue3 和小程序开发，对于这些技术栈实现机制也有一些了解，最少面试...
react 学习(三) 组件更新
我们上一节了了解了函数式组件和类组件的处理方式，本质就是处理基于 babel 处理后的 type 类型，最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
react学习(八) diff 算法实现
前面几节我们学习了解了 react 的渲染机制和生命周期，本节我们正式进入基本面试必考的核心地带 -- diff 算法，了解如何优化和复用 dom 操作的，还有...
react学习(九) React 新的生命周期
我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安...
react 学习14实现 React.memo
上一小节我们学习了 react 中类组件的优化方式，对于 hooks 为主流的函数式编程，react 也提供了优化方式 memo 方法，本小节我们来了解下它的用...
细聊Concent & Recoil , 探索react数据流的新开发模式
开源不易，感谢你的支持，❤ star me if you like concent ^_^
使用hel-micro制作远程antd、tdesign-react
hel-micro，模块联邦sdk化，免构建、热更新、工具链无关的微模块方案 ，欢迎关注与了解
setup vs 5 react hooks,助你避开"沟"中陷阱
本文主题围绕concent的setup和react的五把钩子来展开，既然提到了setup就离不开composition api这个关键词，准确的说setup是由...
setState 同步 与异步
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot