react native的flatList

1:关于这个组件的上拉加载:

onEndReached={(info) => {
if ((!this.state.loading && info.distanceFromEnd > 0) && this.state.list.length < parseInt(this.state.total)) {
this.pageindex++;
this.getList()
}
}}
ListFooterComponent={this.allList.length == parseInt(this.state.total) ? null :
<FooterLoading/>}
onEndReachedThreshold={0.1}
如代码所示需要用到的是onEndReached,onEndReachedThreshold.onEndReachedThreshold这个属性表示当下滑距离底部的距离为屏幕的比例为10%的时候触发onEndReached这个方法
.但是有一种情况就是入股首次加载的数据不够一屏他就会自动继续加载.!this.state.loading && info.distanceFromEnd > 0这个条件表示首次加载之后再继续加载一次.(bug:不一定加载两次之后就会占满屏幕)
然后加载完之后不应该继续请求数据.而且也不应该继续显示footerLoding.
2:下拉刷新:
refreshing={this.state.refresh}
refreshControl={this.onRefresh()}
没刷新的时候应该设置refreshing为false . 调用这个refreshControl方法的时候要设置refreshing为true
onRefresh() {
return (
<RefreshControl
refreshing={this.state.refresh}
onRefresh={() => {
this.pageindex = 1;
this.setState({
refresh: true,
list: [],
total: 0
}, () => {
this.returnList = [];
this.exchangeList = [];
this.allList = [];
this.getList();
});
}}
tintColor="#0dcb6b"
title="加载中..."
titleColor="#0dcb6b"
colors={['#fff']}
progressBackgroundColor="#0dcb6b"
/>
)
}
注意的是刷新完成之后应该要设置refreshing为false.