React-Native中使用ListView時一般都會用到下拉刷新和上拉加載更多功能，系統(tǒng)提供有RefreshControl下拉刷新組件，簡單易用。
在做上拉加載更多功能時卻比較麻煩，在仔細(xì)研究了ReactNative官網(wǎng)文檔之后，依然沒有找到實(shí)現(xiàn)辦法，但是可以了解到上拉加載功能肯定離不開ListView的兩個屬性onEndReached 、onEndReachedThreshold。

官網(wǎng)文檔中同時提到了renderFooter頁腳渲染屬性，網(wǎng)上搜到的很多也用到了這個屬性，但是我在使用過程中發(fā)現(xiàn)它對我并沒有幫助

onEndReached

當(dāng)所有的數(shù)據(jù)都已經(jīng)渲染過，并且列表被滾動到距離最底部不足onEndReachedThreshold個像素的距離時調(diào)用。原生的滾動事件會被作為參數(shù)傳遞。譯注：當(dāng)?shù)谝淮武秩緯r，如果數(shù)據(jù)不足一屏（比如初始值是空的），這個事件也會被觸發(fā)，請自行做標(biāo)記過濾。

onEndReachedThreshold

調(diào)用onEndReached之前的臨界值，單位是像素。

下面記錄我在實(shí)現(xiàn)上拉加載功能的具體方法和代碼。首先自定義正在加載更多和已加載全部的組件，新建LoadMoreFooter.js文件，復(fù)制粘貼以下代碼。

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;

接下來要處理自定義加載更多組件的顯示與隱藏邏輯。當(dāng)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>
    );
  },

下面要處理的是加載數(shù)據(jù)時最復(fù)雜的邏輯關(guān)系：刷新當(dāng)前數(shù)據(jù)、還是加載更多數(shù)據(jù)。這里定義了this.state.isRefreshing屬性來區(qū)分是否正在刷新當(dāng)前數(shù)據(jù)。同時定義了this.state.data屬性，當(dāng)正在加載更多數(shù)據(jù)時，需要在當(dāng)前頁列表dataSource的基礎(chǔ)上追加下一頁的數(shù)據(jù)，即[...this.state.data , ...JSON.parse(responseData).data]。

向動態(tài)數(shù)組中添加對象，使用的是方法是[...array_one , ...array_two]，與OC中的可變數(shù)組不同。

  getInitialState(){
    //創(chuàng)建數(shù)據(jù)源
    var ds = new ListView.DataSource({rowHasChanged:(row1, row2) => row1 !== row2});
    //初始化數(shù)據(jù)源
    return {
      data:null,
      dataSource: ds,
      isEmptyData:false,
      isRefreshing:true,
      extend:'',
      isLoadMore:false,
      page:1
    }
  },

  //當(dāng)列表滑動到最后一個Cell時，調(diào)用此方法
  _toEnd(){
    if (this.state.isRefreshing==false && this.state.data.length>=_pageSize) {
      this.setState({
        isLoadMore:true,
      })
      // 立即更改屬性值 page+1
      this.state.page = this.state.page + 1
      // 網(wǎng)絡(luò)請求數(shù)據(jù)
      this.getEduData();
    }
  },

注意事項(xiàng)：
react native setState之后的state值不能立即使用，setState之后，需要走完RN生命周期，也就是走到render時，state的值才會變成setState的值，要立即使用state的值，需要直接更改，也即this.state.something = 'now';
所以在設(shè)置page頁碼加1時，不能直接在setState中設(shè)置，要實(shí)現(xiàn)page屬性立刻加1，使用this.state.page = this.state.page + 1

數(shù)據(jù)請求成功后，要在請求成功的回調(diào)方法中更新數(shù)據(jù)源。使用三木運(yùn)算來分別更新刷新頁面數(shù)據(jù)、和加載更多數(shù)據(jù)時的業(yè)務(wù)邏輯。

    // 更新數(shù)據(jù)源
    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,
      });
    }

如果請求的數(shù)據(jù)為空，展示給用戶提示信息。

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