FlatList在呈现时调用‘`onEndReached`’
FlatList在呈现时调用‘`onEndReached`’
提问于 2017-12-20 16:06:05
下面是我的简单category list page的render()函数。
最近，我为我的FlatList视图添加了分页，所以当用户滚动到底部时，会在某个点(从底部的onEndReachedThreshold值长度)调用onEndReached，它将获取下一个categories并连接类别道具。
但我的问题是，当()被称为时，就调用了FlatList，换句话说，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>
)更新我在这里获取this.props.categories数据
componentWillMount() {
if(this.props.token) {
this.props.loadCategoryAll(this.props.token);
}
}回答 18
Stack Overflow用户
回答已采纳
发布于 2017-12-22 11:43:17
尝试在onMomentumScrollBegin上实现FlatList：
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;
}
}Stack Overflow用户
发布于 2020-02-11 12:09:56
我已经安排好了
<Flatlist
...
onEndReached={({ distanceFromEnd }) => {
if (distanceFromEnd < 0) return;
...
}
...
/>Stack Overflow用户
发布于 2019-08-21 20:31:44
首先检查FlatList是否位于本机基的ScrollView或Content中。然后把它去掉--实际上您不需要使用Content或ScrollView，因为FlatList有ListFooterComponent和ListHeaderComponent。
虽然不推荐使用Flatlist，但是如果您确实需要在ScrollView中使用Flatlist，那么请看下面的答案：https://stackoverflow.com/a/57603742/6170191
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47910127
复制相关文章
相似问题
腾讯云开发者
