FlatList onEndReached called On Load (React Native)

Question

当我在FlatList中使用onEndReached函数时，它会自动调用。

以下是此问题的链接。

链接

iOS中是否有可用的解决方案或任何替代方案？

编辑：

下面是我尝试的代码，但这似乎不起作用。

constructor(props){
super(props);
this.state = {
flatListReady:false
}
}
loadMore(){
if(!this.state.flatListReady){
return null;
}
else{
alert("End Reached")
}
}
_scrolled(){
this.setState({flatListReady:true});
}
render() {
return (
<Layout style={{ flex: 1 }}>
<FlatList
data={listData}
renderItem={({item}) => this._renderItem(item)}
keyExtractor={(item, index) => item.key}
onEndReached={() => this.loadMore()}
onEndReachedThreshold={0.5}
onScroll={() => this._scrolled()}
/>
</Layout>

Answer 1

试试这个，

onEndReachedThreshold={0.5}
onEndReached={({ distanceFromEnd }) => {
if(distanceFromEnd >= 0) {
//Call pagination function
}
}}

Answer 2

有时事情并不像它们应该的那样工作，归根结底它不是本机代码，因此组件的顺序或Flatlist封装在非预期组件中的事实，或者应该将某些属性传递给Flatlist组件本身以正确激活onEndReached回调。

我自己也遇到过这个问题，我不知道该怎么做才能让它正常工作。

一个很好的解决方法是从Flatlist继承ScorllView属性的事实中得出的。 因此，您可以使用onScroll属性来检测是否已到达终点。

<FlatList
data={this.props.dashboard.toPreviewComplaints}
onScroll={({nativeEvent})=>{
//console.log(nativeEvent);
if(!this.scrollToEndNotified && this.isCloseToBottom(nativeEvent)){
this.scrollToEndNotified = true;
this.loadMoreData();
}
}}
/>

this.scrollToEndNotified用作标志，以防止滥用对loadMore终结点的调用

isCloseToBottom({layoutMeasurement, contentOffset, contentSize}){
return layoutMeasurement.height + contentOffset.y >= contentSize.height - 100;
}

因此，每当它在isCloseToBottom调用中成功时，都意味着您已经到达列表的末尾，因此您可以调用loadMoreData函数

Answer 3

非常小心地处理这个函数，

endReached=()=>{
//take care of ES6 Fat arrow function and trigger your conditions properly with current state and new state data or current state with new Props.
Based on those conditions only, you need to trigger the other API call
}

---

<FlatList data={this.state.data}
extraData={this.state.load}
renderItem={this.renderCard}
keyExtractor={item => item.fundRequestId}
onEndReached={this.endReached}
onEndReachedThreshold={.7}
ListFooterComponent={this.renderFooter}
/>