这是我的简单 category list page的render（）函数。
最近，我为我的FlatList视图添加了分页，因此当用户滚动到底部时，onEndReached在某个点（onEndReachedThreshold值的长度从底部）调用，并且将获取下一个categories并加入类别Prop。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
但我的问题是 orendreached时称为render（），换句话说，Flatlist的onEndReached在到达底部之前是触发的。
我对onEndReachedThreshold?的价值错误吗？
return (
<View style={{ flex:1 }}>
<FlatList
data={this.props.categories}
renderItem={this._renderItem}
keyExtractor={this._keyExtractor}
numColumns={2}
style={{flex: 1, flexDirection: 'row'}}
contentContainerStyle={{justifyContent: 'center'}}
refreshControl={
<RefreshControl
refreshing = {this.state.refreshing}
onRefresh = {()=>this._onRefresh()}
/>
}
// curent value for debug is 0.5
onEndReachedThreshold={0.5} // Tried 0, 0.01, 0.1, 0.7, 50, 100, 700
onEndReached = {({distanceFromEnd})=>{ // problem
console.log(distanceFromEnd) // 607, 878
console.log('reached'); // once, and if I scroll about 14% of the screen,
//it prints reached AGAIN.
this._onEndReachedThreshold()
}}
/>
</View>
)
update i获取this.props.categories数据
componentWillMount() {
if(this.props.token) {
this.props.loadCategoryAll(this.props.token);
}
}
尝试在FlatList上实现onMomentumScrollBegin：
constructor(props) {
super(props);
this.onEndReachedCalledDuringMomentum = true;
}
...
<FlatList
...
onEndReached={this.onEndReached.bind(this)}
onEndReachedThreshold={0.5}
onMomentumScrollBegin={() => { this.onEndReachedCalledDuringMomentum = false; }}
/>
并修改您的onEndReached
onEndReached = ({ distanceFromEnd }) => {
if(!this.onEndReachedCalledDuringMomentum){
this.fetchData();
this.onEndReachedCalledDuringMomentum = true;
}
}
我已经与
一起使用<Flatlist
...
onEndReached={({ distanceFromEnd }) => {
if (distanceFromEnd < 0) return;
...
}
...
/>
首先检查本机基础的 ScrollView或 Content是否在flatlist中。然后把它带到它外面实际上，您不需要使用Content或ScrollView，因为Flatlist具有ListFooterComponent和ListHeaderComponent。
虽然不建议使用，但如果您确实需要在scrollview中使用flatlist，请查看以下答案：https：//stackoverflow.com/a/57603742/6170191
尝试不同的方法后，我通过将固定列表包裹起来，以固定高度和挠性：1。通过这种设置，我能够在滚动底部滚动后才被打电话给一次。这是我的代码示例：
render() {
const {height} = Dimensions.get('window');
return (
<View style={{flex:1, height:height}}>
<FlatList
data={this.props.trips_uniques}
refreshing={this.props.tripsLoading}
onRefresh={()=> this.props.getTripsWatcher()}
onEndReached={()=>this.props.getMoreTripsWatcher()}
onEndReachedThreshold={0.5}
renderItem={({item}) => (
<View style={Style.card}>
...
...
</View>
)}
keyExtractor={item => item.trip_id}
/>
</View>
)
}
我的orendreached（）函数只会调用API并更新我的数据。它对距离或阈值的距离
大多数情况下都没有进行任何计算，这也取决于您要渲染的项目数（更多项目，更多的滚动尺寸）。
尝试遵循此逻辑：
如果10个项目覆盖了您的屏幕，并且您在每张滚动中渲染20个项目，则将OnEndreachEdtherphereshold设置为0.8。
如果2或3个项目覆盖了您的屏幕，并且您在每张滚动上渲染10个项目，则将OnEndreachEdtherphershold设置为0.5。
。另外，请使用initialnumtorender = numItems。由于某种原因，使用此lantlist道具有助于减少多次启用通话的机会。
只需使用orendreachedThreshold的价值。
其他时候，由于嵌套滚动视图而产生此错误。请勿将您的套件放在滚动浏览中。相反，使用Flatlist标头和页脚道具。
对于这两种解决方案，我建议将flatlist样式和contentContainerStyle设置为{flexgrow：1}。
strong>在flatlist内部查看
如果要显示3或4个记录，并且想在到达末端时加载下一个数据。将OnEndReachEdThresthold设置为0或0.1。
有点迟到，但我只是遇到了这个问题，我通过将其传递给我的 <FlatList/>初始numtorender prop。该道具默认为10个，因此，如果您不设置它，并且屏幕在初始渲染上显示了10个以上的项目，则它将触发onEndReached，因为它已通过了第10个元素。
initialNumToRender可能应该与每页获取的元素数量相同。
也许您可以通过增加
如果flatList在另一个flatlist上或滚动浏览时，请立即启用ordredreach呼叫，当渲染组件解决该问题时不会将flatlist与另一个问题包装。
我在<Overlay>内有一个<FlatList>（来自React-native）（来自React-Native-elements。）我有onEndReached的问题是第一次渲染，在用户做任何事情之前。
通过使用<Modal>（来自React-Native）而不是<Overlay>。@Lilario答案的挂钩版本：
const onEndReachedCalledDuringMomentum = useRef(true)
onEndReachedHandler = ({ distanceFromEnd }) => {
if(!onEndReachedCalledDuringMomentum.current){
fetchData()
onEndReachedCalledDuringMomentum.current = true
}
}
<FlatList
...
onEndReached={onEndReachedHandler}
onEndReachedThreshold={0.7}
onMomentumScrollBegin={() => { onEndReachedCalledDuringMomentum.current = false }}
/>
这个简单的解决方案对我有用。请注意"刷新"状态由使用效果挂钩中的异步API调用来检索flatlist的数据。
const onEndReachedHandler = () => {
if (!refreshing) ...
}
<FlatList
...
data={mydata}
onEndReached={onEndReachedHandler}
onEndReachedThreshold={0.7}
refreshing={refreshing}
/>
我整天都在挣扎，但是我遇到的问题是，我在scrollview中使用了flatlist。因此，删除scrollview＆amp;然后独立使用flatlist。这将解决我的问题。
根据我的经验，您可以简单地利用 onerendreachedthreshord props 在您的flatlist或sectionList中props props props props props props of tlunlist或sectionlist中，然后将一个非常小的数字传递给它。
。onEndReachedThreshold={0.001}
根据flatlist文档的说法，orendreachedthreshold是列表项目底部的长度单位。
距末端有多远（以列表的可见长度为单位）列表的底部边缘必须从内容的末端开始才能触发OnEndreached回调。例如，值为0.5将触发当内容的末尾在可见的一半之内列表的长度。
因此，像0.001这样的非常小的值可帮助您确保只有在内容的末尾在列表的可见长度的末尾时才会被调用。
。希望这会有所帮助:)对不起英语。
解决方案比任何人想象的都要简单。
只需添加一个！它对我有用：
onEndReached={() => {
if (!isLoading) {
fetchProducts();
}
}}
以及带有scrollview和flatlist的完整代码：
<ScrollView
horizontal={true}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
style={styles.mainContainer}>
<FlatList
ListHeaderComponent={TableHeader}
data={displayedProducts}
renderItem={(item: ListRenderItemInfo<IProduct>) => TableRow(item, showDeleteModal)}
keyExtractor={keyExtractor}
ListFooterComponent={<Loading loadingText={'Loading products...'} />}
onEndReached={() => {
if (!isLoading) {
fetchProducts();
}
}}
onEndReachedThreshold={0.8}
stickyHeaderIndices={[0]}
/>
</ScrollView>
，因为我在这里没有具体看过这种情况：如果您使用空数据源渲染flatlist并将其添加到它上阈值。
看来，即使以后有项目添加到数据源中，也可以完全禁用odendreach作为安全措施。
我的修复程序是不要使用一个空数据集渲染flatlist，我可能应该做的。
它使用lodash的调试。首先，我会从" lodash.debounce"中导入审问。然后，我使用debounce使用500毫秒间隔
加载更多功能 <Flatlist
onEndReached = {debounce(this._onLoadMore, 500)}
/>