react native简单实现上拉加载更多

下拉刷新的工具我用的是：react-native-pullrefresh-scrollview，上拉加载更多没找到，所以自己动手做了一个，其实这个上拉加载更多不难，大概的思路就是将ListView的数据最后添加空数据，在renderRow中判断是否最后一行，然后返回ActivityIndicator组件。当然这只是大概思路，具体还要做一些细节判断防止诸如内容高度比容器高度小的时候触发加载更多等问题。下面我讲解一下我的做法。

1. 首先创建数据加载函数

_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;
        // 处理传入参数，插入page页面
        if (this.networkParams[1].indexOf("@") != -1) {
            var bodyArr = this.networkParams[1].split("@");
            var body = bodyArr[0]+this.page+bodyArr[1];
        }
        setTimeout(function () { // 测试专用，延时3秒
            fetch(this.networkParams[0]+body)
                .then((response) => response.json())
                .then((responseJson) => {
                    if (refresh != undefined && refresh != null) {
                        // 这里很奇怪，我在自己的项目里面的类只里正常，下拉刷新解锁正常，但是这里说什么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一个空值
                                this.setState({theNetworkData: temp});
                            }
                            else {
                                var temp = this.state.theNetworkData;
                                temp.pop();
                                temp = temp.concat(responseJson.tracks);
                                temp.push("");
                                this.setState({theNetworkData: temp});
                            }
                            // 判断是否已经到尽头，是的话，上拉将不再触发数据加载任务
                            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) { // 下拉刷新触发
        this._getRecord(1, refresh);
    }
    _onEndReached(event) { // 上啦加载触发
        // 只要用于防止在内容高度低于容器高度的时候出发加载数据函数
        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.调用(上面是封装的CustomListView控件)

<TestListView tbvHeight={Public.kHeight-64-3}
                              ref={(e)=>this.tbv = e}
                              defaultPageItem={4} // 设置一个值，通常是和请求url设置的每一页n条数据的n一致，用来判断是否已经是加载的最后一页，若是，则以后不再触发上啦加载更多函数，直到下拉刷新。
                              renderRowCallback={(rowData, sectionId, rowId)=>this._renderRow(rowData, sectionId, rowId)} 
                              networkParams={["http://v5.pc.duomi.com/search-ajaxsearch-searchall?", 'kw=相爱&pi=@&pz=4', "kFinancialRecords"]}
                />

然后这个是_renderRow在当前类实现一个自定义的item

3. 效果
   loadmore.gif
   4.总结
   有需要的可以下载我的呆萌： Demo