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