RN笔记-ListView上拉加载更多功能

React-Native中使用ListView时一般都会用到下拉刷新和上拉加载更多功能，系统提供有RefreshControl下拉刷新组件，简单易用。
在做上拉加载更多功能时却比较麻烦，在仔细研究了ReactNative官网文档之后，依然没有找到实现办法，但是可以了解到上拉加载功能肯定离不开ListView的两个属性onEndReached 、onEndReachedThreshold。

官网文档中同时提到了renderFooter页脚渲染属性，网上搜到的很多也用到了这个属性，但是我在使用过程中发现它对我并没有帮助

onEndReached

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

onEndReachedThreshold

调用onEndReached之前的临界值，单位是像素。

下面记录我在实现上拉加载功能的具体方法和代码。首先自定义正在加载更多和已加载全部的组件，新建LoadMoreFooter.js文件，复制粘贴以下代码。

import React, { Component } from 'react';
  import {
      View,
      Text,
      StyleSheet,
      ActivityIndicator
  } from 'react-native';

  var LoadMoreFooter = React.createClass ({
      getDefaultProps(){
        return{
          isLoadAll:false
        }
      },
      render() {
          return (
              <View style={styles.footer}>
                  <ActivityIndicator animating={!this.props.isLoadAll} />
                  <Text style={styles.footerTitle}>{this.props.isLoadAll ? '已加载全部' : '正在加载更多…'}</Text>
              </View>
          )
      }
  })

  var styles = StyleSheet.create({
      footer: {
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
          height: 30,
      },
      footerTitle: {
          marginLeft: 10,
          fontSize: 13,
          color: 'gray'
      }
  })

module.exports = LoadMoreFooter;

接下来要处理自定义加载更多组件的显示与隐藏逻辑。当this.state.isLoadMore ==true时显示<LoadMoreFooter />组件，否则为null

  render() {
    return (
        this.state.isEmptyData ?
        this.isEmptyData() :
        <View style={styles.container}>
          { /*列表*/ }
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
            onEndReached={this._toEnd}
            onEndReachedThreshold={10}
            // renderFooter={this._toEnd}
            refreshControl={
             <RefreshControl
             refreshing={this.state.isRefreshing}
             tintColor="gray"
             title="正在刷新"
             onRefresh={this._onRefresh}/>}
          />
          {
            this.state.isLoadMore ?
            <LoadMoreFooter isLoadAll={!this.state.isLoadMore} />
            : null
          }
      </View>
    );
  },

下面要处理的是加载数据时最复杂的逻辑关系：刷新当前数据、还是加载更多数据。这里定义了this.state.isRefreshing属性来区分是否正在刷新当前数据。同时定义了this.state.data属性，当正在加载更多数据时，需要在当前页列表dataSource的基础上追加下一页的数据，即[...this.state.data , ...JSON.parse(responseData).data]。

向动态数组中添加对象，使用的是方法是[...array_one , ...array_two]，与OC中的可变数组不同。

  getInitialState(){
    //创建数据源
    var ds = new ListView.DataSource({rowHasChanged:(row1, row2) => row1 !== row2});
    //初始化数据源
    return {
      data:null,
      dataSource: ds,
      isEmptyData:false,
      isRefreshing:true,
      extend:'',
      isLoadMore:false,
      page:1
    }
  },

  //当列表滑动到最后一个Cell时，调用此方法
  _toEnd(){
    if (this.state.isRefreshing==false && this.state.data.length>=_pageSize) {
      this.setState({
        isLoadMore:true,
      })
      // 立即更改属性值 page+1
      this.state.page = this.state.page + 1
      // 网络请求数据
      this.getEduData();
    }
  },

注意事项：
react native setState之后的state值不能立即使用，setState之后，需要走完RN生命周期，也就是走到render时，state的值才会变成setState的值，要立即使用state的值，需要直接更改，也即this.state.something = 'now';
所以在设置page页码加1时，不能直接在setState中设置，要实现page属性立刻加1，使用this.state.page = this.state.page + 1

数据请求成功后，要在请求成功的回调方法中更新数据源。使用三木运算来分别更新刷新页面数据、和加载更多数据时的业务逻辑。

    // 更新数据源
    var data = this.state.data;
    if (!JSON.parse(responseData).data || JSON.parse(responseData).data.length==0) {
      this.setState({
        isEmptyData: this.state.isLoadMore ? false : true,
        isRefreshing:false,
        isLoadMore:false
      });
      if (this.state.isLoadMore) {
        // 立即更改属性值 page-1
        this.state.page = this.state.page - 1
      }
    } else {
      data = this.state.isLoadMore ? [...this.state.data , ...JSON.parse(responseData).data] : JSON.parse(responseData).data
      this.setState({
        data:data,
        isRefreshing:false,
        dataSource:this.state.dataSource.cloneWithRows(data),
        isLoadMore:false,
      });
    }

如果请求的数据为空，展示给用户提示信息。

  isEmptyData(){
    return (
      <ScrollView style={{backgroundColor:'#e8e8e8'}}>
        <View style={styles.emptyDataStyle}>
          <Image source={{uri:'bv_dropbox'}} style={styles.emptyDataIcon}/>
          <Text style={{marginTop:5,color:'gray'}}>暂未有资讯</Text>
        </View>
      </ScrollView>
    )
  }