下拉刷新的工具我用的是：react-native-pullrefresh-scrollview，上拉加載更多沒找到，所以自己動(dòng)手做了一個(gè)，其實(shí)這個(gè)上拉加載更多不難，大概的思路就是將ListView的數(shù)據(jù)最后添加空數(shù)據(jù)，在renderRow中判斷是否最后一行，然后返回ActivityIndicator組件。當(dāng)然這只是大概思路，具體還要做一些細(xì)節(jié)判斷防止諸如內(nèi)容高度比容器高度小的時(shí)候觸發(fā)加載更多等問題。下面我講解一下我的做法。

1. 首先創(chuàng)建數(shù)據(jù)加載函數(shù)

_getRecord(type, refresh) {
        if (type == 1) { // 判斷 1 為下拉刷新啊，2為上啦加載更多
            this.page = 1;
            if (refresh == null) {
            }
        }
        else {
            if (this.state.isLoadingMore == true) {
                return;
            } 
            this.page ++;
            this.setState({isLoadingMore: true});
        }
        var body = null;
        // 處理傳入?yún)?shù)，插入page頁面
        if (this.networkParams[1].indexOf("@") != -1) {
            var bodyArr = this.networkParams[1].split("@");
            var body = bodyArr[0]+this.page+bodyArr[1];
        }
        setTimeout(function () { // 測(cè)試專用，延時(shí)3秒
            fetch(this.networkParams[0]+body)
                .then((response) => response.json())
                .then((responseJson) => {
                    if (refresh != undefined && refresh != null) {
                        // 這里很奇怪，我在自己的項(xiàng)目里面的類只里正常，下拉刷新解鎖正常，但是這里說什么refresh undefined，什么鬼。
                        // refresh.onRefreshEnd();
                    }
                    else {
                    }
                    if (type == 2) {
                        this.setState({isLoadingMore: false});
                    }
                    if (Public._notNullOrUndefined(responseJson)) {
                        if (responseJson.tracks.length > 0) {
                            if (type == 1) {
                                var temp = responseJson.tracks;
                                temp.push("");  // push一個(gè)空值
                                this.setState({theNetworkData: temp});
                            }
                            else {
                                var temp = this.state.theNetworkData;
                                temp.pop();
                                temp = temp.concat(responseJson.tracks);
                                temp.push("");
                                this.setState({theNetworkData: temp});
                            }
                            // 判斷是否已經(jīng)到盡頭，是的話，上拉將不再觸發(fā)數(shù)據(jù)加載任務(wù)
                            if (responseJson.tracks.length < this.defaultPageItem) {
                                this.canLoadMore = false;
                            }
                            else {
                                this.canLoadMore = true;
                            }
                        }
                    }
                    else {
                        this.page --;
                    }
                })
                .catch((error) => {
                    // this.page --;
                    // if (refresh != null) {
                    //     refresh.onRefreshEnd();
                    // }
                    // else {
                    //     Public.hideHUD();
                    // }
                    // if (type == 2) {
                    //     this.setState({isLoadingMore: false});
                    // }
                });
        }.bind(this), 3000);

2. _onRefresh，_onEndReached，renderRow

  _onRefresh(refresh) { // 下拉刷新觸發(fā)
        this._getRecord(1, refresh);
    }
    _onEndReached(event) { // 上啦加載觸發(fā)
        // 只要用于防止在內(nèi)容高度低于容器高度的時(shí)候出發(fā)加載數(shù)據(jù)函數(shù)
        if (this.tbvOffsetY > 5 && this.canLoadMore == true) {
            this._getRecord(2,null);
        }
    }
_renderRow(rowData, sectionId, rowId) {
        if (rowId == this.state.theNetworkData.length - 1) { // 判斷最后一行
            return (<ActivityIndicator style={{height: 50}} animating={this.state.isLoadingMore} color="black" />);
        }
        return this.renderRowCallback(rowData, sectionId, rowId);
    }

4.調(diào)用(上面是封裝的CustomListView控件)

<TestListView tbvHeight={Public.kHeight-64-3}
                              ref={(e)=>this.tbv = e}
                              defaultPageItem={4} // 設(shè)置一個(gè)值，通常是和請(qǐng)求url設(shè)置的每一頁n條數(shù)據(jù)的n一致，用來判斷是否已經(jīng)是加載的最后一頁，若是，則以后不再觸發(fā)上啦加載更多函數(shù)，直到下拉刷新。
                              renderRowCallback={(rowData, sectionId, rowId)=>this._renderRow(rowData, sectionId, rowId)} 
                              networkParams={["http://v5.pc.duomi.com/search-ajaxsearch-searchall?", 'kw=相愛&pi=@&pz=4', "kFinancialRecords"]}
                />

然后這個(gè)是_renderRow在當(dāng)前類實(shí)現(xiàn)一個(gè)自定義的item

3. 效果
   
   loadmore.gif
   
   4.總結(jié)
   有需要的可以下載我的呆萌： Demo