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.