问题描述
这是我简单的类别列表页面
的render()函数.
Here is render() function for my simple category list page
.
最近我为我的 FlatList
视图添加了分页,所以当用户滚动到底部时,onEndReached
在某个点被调用(onEndReachedThreshold
value length 从底部开始),它将获取下一个 categories
并连接类别道具.
Recently I added pagination for my FlatList
View so when the user scrolls to the bottom, onEndReached
is called in a certain point(onEndReachedThreshold
value length from the bottom), and it will fetch the next categories
and concatenate the categories props.
但我的问题是onEndReached在render()被调用时被调用 换句话说,FlatList的onEndReached
在到达底部之前被触发.
But my problem is onEndReached is called when render() is called In other words, FlatList's onEndReached
is triggered before it reach the bottom.
我是否为 onEndReachedThreshold 设置了错误的值?
你看到任何问题了吗?
Am I putting wrong value for onEndReachedThreshold?
Do you see any problem?
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 我在这里获取 this.props.categories
数据
UPDATE I fetch this.props.categories
data here
componentWillMount() {
if(this.props.token) {
this.props.loadCategoryAll(this.props.token);
}
}
推荐答案
尝试在 FlatList
上实现 onMomentumScrollBegin
:
Try to implement onMomentumScrollBegin
on 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;
}
}
这篇关于FlatList 在渲染时调用 `onEndReached`的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!