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('已加載全部');
    }
}