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

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

onEndReached

當(dāng)所有的數(shù)據(jù)都已經(jīng)渲染過，并且列表被滾動(dòng)到距離最底部不足onEndReachedThreshold個(gè)像素的距離時(shí)調(diào)用别惦。原生的滾動(dòng)事件會(huì)被作為參數(shù)傳遞狈茉。譯注：當(dāng)?shù)谝淮武秩緯r(shí)，如果數(shù)據(jù)不足一屏（比如初始值是空的）掸掸，這個(gè)事件也會(huì)被觸發(fā)氯庆，請(qǐng)自行做標(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;

接下來(lái)要處理自定義加載更多組件的顯示與隱藏邏輯禽翼。當(dāng)this.state.isLoadMore ==true時(shí)顯示<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ù)時(shí)最復(fù)雜的邏輯關(guān)系：刷新當(dāng)前數(shù)據(jù)、還是加載更多數(shù)據(jù)闰挡。這里定義了this.state.isRefreshing屬性來(lái)區(qū)分是否正在刷新當(dāng)前數(shù)據(jù)锐墙。同時(shí)定義了this.state.data屬性，當(dāng)正在加載更多數(shù)據(jù)時(shí)长酗，需要在當(dāng)前頁(yè)列表dataSource的基礎(chǔ)上追加下一頁(yè)的數(shù)據(jù)溪北，即[...this.state.data , ...JSON.parse(responseData).data]。

向動(dòng)態(tài)數(shù)組中添加對(duì)象夺脾，使用的是方法是[...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)列表滑動(dòng)到最后一個(gè)Cell時(shí)咧叭，調(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ò)請(qǐng)求數(shù)據(jù)
      this.getEduData();
    }
  },

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

數(shù)據(jù)請(qǐng)求成功后，要在請(qǐng)求成功的回調(diào)方法中更新數(shù)據(jù)源佩脊。使用三木運(yùn)算來(lái)分別更新刷新頁(yè)面數(shù)據(jù)蛙粘、和加載更多數(shù)據(jù)時(shí)的業(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,
      });
    }

如果請(qǐng)求的數(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>
    )
  }