react-native实现长列表的下拉刷新和上拉加载更多

显示数据列表时离不开数据的刷新和延迟加载，对于用户的体验和APP的性能都有好处，在rn中展示长列表，使用flatList

1、FlatList如何显示数据？给FlatList的data属性指定一个值，通过renderItem循环输出。

<FlatList
　　data = {this.state.logData}

　　renderItem={({item}) =>　　
　　　　<View>{item.key}</View>
　　}

/>

2.设置下拉刷新属性

<FlatList
　　data = {this.state.logData}
　　onRefresh = {this._onRefresh.bind(this)} //刷新操作
　　refreshing = {this.state.refreshing} //等待加载出现加载的符号是否显示
　　renderItem={({item}) =>　　
　　　　<View>{item.key}</View>
　　}
/>
//下拉刷新,更改状态，重新获取数据
_onRefresh(){
　　this.setState({
　　　　currentPage:1,
　　　　refreshing:true,
　　　　logData:[]
　　},()=>{
　　　　this.getCallLog();　　　　
　　});
　　
}

//获取数据，根据当前页面的页码，获取相应的数据，并将数据合并，赋值到logData,并隐藏加载动画
getCallLog(){

    let param = {
        page:this.state.currentPage
    };
    fetchRequest('socket/call/log','GET',param)
        .then( res=>{
            if(res.code === 200){
                console.log(res);
                this.setState({
                    refreshing:false,
                    logData:this.state.logData.concat(res.data),
                    totalCount:res.total,
                    lastPage:res.lastPage
                });
            }

        }).catch( err=>{
        console.log(err);
    });
}

3.实现上拉加载

在FlatList中添加属性

onEndReachedThreshold = {0.1} //当距离内容比例不足内容0.1比例时触发onEndReached
onEndReached = {this._endReached.bind(this)} //上拉加载数据

//当当前页面小于最大页面时，继续加载，否则提示已全部加载完成

_endReached(){
    let that=this;
    // 判断首屏满屏的情况
    if(that.state.logData && that.state.lastPage > this.state.currentPage){
        that.state.currentPage++;
        this.getCallLog();
    }else{
        //若总数未满一屏，进去就提示
        this.showToast('已加载全部');
    }
}