React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)

在web应用中,上拉刷新加载更多,下拉刷新列表的操作非常常见,那么在React-Native中是如何实现呢,我们具体来看一下
ReactNative提供了RefreshControl下拉刷新组件,但是没有提供上拉刷新组件,上拉刷新在App中是很常用的。

今天我们来实现一个iOS和Android通用的上拉刷新功能。

下面简要介绍下我实现的思路。

思路:

1、常量定义:

const moreText = "加载完毕"; //foot显示的文案
//页码
var pageNum = 1;
//每页显示数据的条数
const pageSize = 10;
//页面总数据数
var pageCount = 0;
//页面List总数据
var totalList = new Array(); 

//foot: 0 隐藏 1 已加载完成 2 显示加载中 

2、定义ListView

<ListView
 enableEmptySections={true}
 dataSource={this.state.dataSource}
 renderRow={this._renderRow.bind(this)}
 renderFooter={this._renderFooter.bind(this)}
 onEndReached={this._endReached.bind(this)}
 onEndReachedThreshold={0}
/> 

3、声明State状态机变量

ListView.DataSource实例(列表依赖的数据源)

constructor(props) {
 super(props);
 this.state = {
  dataSource: new ListView.DataSource({
   rowHasChanged: (r1, r2) => r1 !== r2,
  }),
  loaded: false,//控制Request请求是否加载完毕
  foot:0,// 控制foot, 0:隐藏foot 1:已加载完成 2 :显示加载中
  error:false, 

这里我们主要声明了dataSource,这个没什么说的

  1. loaded:用来控制整个页面的菊花
  2. error:如果Request错误,显示一个错误页面
  3. foot: 控制Footer的view

4、渲染页面前,加载数据

componentWillMount() {
 this._fetchListData();
} 

5、Load服务端数据

_fetchListData() {
 if(pageNum > 1){
  this.setState({loaded:true});
 }
 fetch(requestURL, {
  method: 'get',
  headers: headerObj,
 }).then(response =>{
  if (response.ok) {
   return response.json();
  } else {
   this.setState({error:true,loaded:true});
  }
 }).then(json=>{
  let responseCode = json.code;
  if (responseCode == 0) {
   let responseData = json.data; 

   pageCount = responseData.count;
   let list = responseData.data; 

   if (orderList == null) {
    orderList = [];
    currentCount = 0;
   } else {
    currentCount = list.length;
   }
   if(currentCount < pageSize){
    //当当前返回的数据小于PageSize时,认为已加载完毕
    this.setState({ foot:1,moreText:moreText});
   }else{//设置foot 隐藏Footer
    this.setState({foot:0});
   }
   for (var i=0; i < list.length; i++) {
    totalList.push( list[i] );
   } 

   this.setState({
    dataSource: this.state.dataSource.cloneWithRows(totalList),
    loaded: true,
   });
  }else{
   this.setState({error:true,loaded:true});
  }
 }).catch(function (error) {
  this.setState({error:true,loaded:true});
 });
}

这里的细节挺多的:

1、当pageNum > 1时,就不要整个页面的菊花,此时loaded一直为true,这个主要是为了页面效果,要不然没加载一页数据,这个屏幕就会闪一下。

2、比较当前返回的list的大小,是否小于pageSize,控制Footer是否隐藏,还是显示已加载完毕

3、声明了一个全局的totalList对象,每次有新数据的时候,都push进去。

如果不采用push的方式的话,直接采用setState方法的话,第二页会把第一页的数据覆盖掉。

6、定义renderRow方法

renderRow={this._renderRow.bind(this)}   列表组件渲染函数 ,此处页面逻辑省略。

7、定义renderFooter方法

renderFooter   页脚会在每次渲染过程中都重新渲染。

_renderFooter() {
 if(this.state.foot === 1){//加载完毕
  return (
  <View style={{height:40,alignItems:'center',justifyContent:'flex-start',}}>
   <Text style={{color:'#999999',fontSize:12,marginTop:10}}>
    {this.state.moreText}
   </Text>
  </View>);
 }else if(this.state.foot === 2) {//加载中
  return (
  <View style={{height:40,alignItems:'center',justifyContent:'center',}}>
   <Image source={{uri:loadgif}} style={{width:20,height:20}}/>
  </View>);
 }
}

根据状态机变量foot控制Footer的显示

8、onEndReached 定义

onEndReachedThreshold={0}

当所有的数据都已经渲染过,并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。原生的滚动事件会被作为参数传递。译注:当第一次渲染时,如果数据不足一屏(比如初始值是空的),这个事件也会被触发

_endReached(){
 if(this.state.foot != 0 ){
 return ;
 }
 this.setState({
 foot:2,
 });
 this.timer = setTimeout(
 () => {
  pageNum ++;
  this._fetchListData();
 },500);
}

这里需要注意一下几点

1、第一屏的时候可能也会触发_endReached方法,所以需要判断foot为非 0(即加载中和已加载完毕)时,直接return

2、上拉时,触发_endReached方法,可能server端接口响应很快,几乎看不到菊花效果,特地加了个500毫秒的等待

9、卸载Timer

componentWillUnmount() {
// 如果存在this.timer,则使用clearTimeout清空。
// 如果你使用多个timer,那么用多个变量,或者用个数组来保存引用,然后逐个clear
 this.timer && clearTimeout(this.timer);
} 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-07-09

react-native组件中NavigatorIOS和ListView结合使用的方法

前言 本文主要给大家介绍了关于react-native组件中NavigatorIOS和ListView结合使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先看效果 使用方法 index.ios.js import React, {Component} from 'react'; import { AppRegistry, NavigatorIOS } from 'react-native'; import NewsList from './components/

react-native ListView下拉刷新上拉加载实现代码

本文介绍了react-native ListView下拉刷新上拉加载实现.分享给大家,具体如下: 先看效果图 下拉刷新 React Native提供了一个组件可以实现下拉刷新方法RefreshControl 使用方法 <ListView refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} /> } //... </List

react-native中ListView组件点击跳转的方法示例

前言 在 上一篇我们实现了NavigatorIOS与ListView结合使用的方法,那么这篇文章介绍一下ListView里点击跳转到新视图的方法,话不多说了,来一起看看详细的介绍吧. 先看效果 用法 NewsList.js _onPress(rowData) { this.props.navigator.push({ title: rowData, component: CNodeJSList, passProps: { name: rowData, } }) } 说明 使用 this.prop

React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

本文实例讲述了React Native中ScrollView组件轮播图与ListView渲染列表组件用法.分享给大家供大家参考,具体如下: 1.Scroll View ScrollView是React Native提供的滚动视图组件,渲染一组视图,用户可以进行滑动响应交互,其常用属性如下: 滚动的偏移量:通过event.nativeEvent.contentOffset.x可以得到水平偏移量. horizontal={bool},属性为true时,所有子视图在水平方向排列,否则在纵向排列.默认为

React Native中NavigatorIOS组件的简单使用详解

一.NavigatorIOS组件介绍 1,组件说明 使用 NavigatorIOS 我们可以实现应用的导航(路由)功能,即实现视图之间的切换和前进.后退.并且在页面上方会有个导航栏(可以隐藏). NavigatorIOS 组件本质上是对 UIKit navigation 的包装.使用 NavigatorIOS 进行路由切换,实际上就是调用 UIKit 的 navigation. NavigatorIOS 组件只支持 iOS 系统.React Native 还提供了一个 iOS 和 Android

React Native中导航组件react-navigation跨tab路由处理详解

前言 大家应该都有所体会,我们在一般应用都有跨tab跳转的需求, 这就需要特别处理下路由,所以 下面是使用react-navigation作为路由组件的一种方式. 具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwo push BillTwo, BillTwo 返回到 Bill账单首页. 方法如下: 首先选择路由结构, 选择使用最外层是StackNavigator, 然后包含3个TabNavig

React Native中Navigator的使用方法示例

前言 众所周知在React Native中如何实现页面的跳转,这是一个突破点也是一个难点,想让我们的页面切换起来动起来应该是每一个初学者所追求的,那么在RN中实现这样的功能那必须要了解Navigator的用法了.Navigator是React Native自带的组件,不需要导入第三方组件,下面就来具体说明如何使用. 方法如下 首先,我们最好不要把index.ios.js和index.android.js文件写的很冗余很多代码,可以仅仅将其当做是一个工程的入口,好,废话不多说,开始上代码. 1.习

react native中的聊天气泡及timer封装成的发送验证码倒计时

其实,今天我想把我近期遇到的坑都总结一下: 1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions 2.父子组件的传值,一可以用callBack  二可以用pubsub发布订阅模式 三可以用manager事件监听(a页面要显示的内容 有两种形式,一是从manager主动接收,也就是说不需要点击什么的获取数据,而是时时监听manager里数据的变化,第二种a页面获取要显示内容的形式是 点击出发,获取) 3 需要说的还是na

React Native悬浮按钮组件的示例代码

React Native悬浮按钮组件:react-native-action-button,纯JS组件,支持安卓和IOS双平台,支持设置子按钮,支持自定义位置和样式和图标. 效果图 安装方法 npm i react-native-action-button --save react-native link react-native-vector-icons 因为用到了react-native-vector-icons图标组件,需要做下link.如果你项目中已经使用了react-native-ve

React Native自定义标题栏组件的实现方法

大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率. 标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要.今天先讲一个不带返回按钮的标题栏.废话少说,直接上代码: /** * 封装公共的标题头,没有返回按钮 */ 'use strict'; import React, { Component } from 'react'; import { Text, Vi

React Native 图片查看组件的方法

React Native 图片查看组件:react-native-image-viewer,纯JS组件,小巧快速的图标查看组件.支持图片放大缩小,支持图片加载失败设置替代图片,支持将图片保存到本地等功能. 效果图 安装方法 npm i react-native-image-zoom-viewer --save 使用示例 const images = [ { url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460', },

React Native中Android物理back键按两次返回键即退出应用

前言 本文主要给大家介绍了关于React Native中Android物理back键按两次返回键就会退出应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 话不多说,直接上图: 测试代码 第16~22行 设置事件监听以及移除事件监听. componentWillMount(){ BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid); } componentWillUnmount()