Description
<FlatList
keyboardShouldPersistTaps={'handled'}
data={this.state.listData}
initialNumToRender={this.initialNumToRender}
keyExtractor={this._keyExtractor}
renderItem={this.getView}//渲染每一条记录
ListEmptyComponent={this.emptyComponent}
ListFooterComponent={this.footer}//尾部
//下拉刷新，必须设置refreshing状态
onRefresh={this.onRefresh}
refreshing={this.state.refreshing}
//上拉加载
onEndReachedThreshold={0.1}
onEndReached={this.onEndReached}
>
</FlatList>
onEndReached =() => {
currentPage++;
if (this.state.showFoot === 0){
this.setState({refreshing:false});
}
params.reqParams.page = currentPage;
if (this.state.data.totalpage&&this.state.data.totalpage !== undefined){
if(currentPage == this.state.data.totalpage){
this.setState({showFoot:1});//底部显示没有更多数据
}else if(currentPage>this.state.data.totalpage){
return
}
}
Fetch.fetchData('jsonpost',{},(res) => {
if (res.success!==undefined&&res.success === false){
this.setState({msg:'连接超时,请重试！'});
this.alertSearch._show();
}
if (res.respCode === 'success'){
this.setState({
listData:this.state.listData.concat(res.data.ENTERPRISES),
showFoot:0,
refreshing:false,
totalnum:res.totalnum,
});
}else if(res.respCode === 'failed'){
this.setState({msg:res.Errmsg,refreshing:false});
this.alertSearch._show();
}
})
};
onEndReached triggered 2 times on ios ，but，it is normal on android .If I change a way of writing:
onEndReached =() => {
currentPage++;
if (this.state.showFoot === 0){
this.setState({refreshing:false});
}
params.reqParams.page = currentPage;
if (this.state.data.totalpage&&this.state.data.totalpage !== undefined){
if(currentPage == this.state.data.totalpage){
this.setState({showFoot:1});//底部显示没有更多数据
}else if(currentPage>this.state.data.totalpage){
return
}
}
Fetch.fetchData('jsonpost',{},(res) => {
if (res.success!==undefined&&res.success === false){
this.setState({msg:'连接超时,请重试！'});
this.alertSearch._show();
}
if (res.respCode === 'success'){
const getNewData = (res) =>{
let oldData = this.state.listData;
for (let i = 0;i<res.data.ENTERPRISES.length;i++){
oldData.push(res.data.ENTERPRISES[i]);
}
return oldData
}
const newData = getNewData(res);
this.setState({
listData:newData,
showFoot:0,
refreshing:false,
totalnum:res.totalnum,
});
}else if(res.respCode === 'failed'){
this.setState({msg:res.Errmsg,refreshing:false});
this.alertSearch._show();
}
})
};
The method of "onEndReached" on IOS will not be executed two times.But there will be another problem，
When I first scrolled to the bottom of the list to trigger the "onEndReached" method, if the network request failed and no new list data was rendered, I scrolled again to the bottom of the list and the "onEndReached" method could not be triggered again
The problems of the above two ways of writing：
1、When I am not on the first page list, if I afresh render the list, It will still automatically execute a "onEndReached" method, but I do not scroll to trigger the "onEndReached" method 。
2、When the first render list is less than one screen, the "onEndReached" method will still execute automatically.
I really don't know why these problems will arise. If anyone knows the reasons, please explain them.