react-native – FlatList在呈现时调用`onEndReached`

这是我的简单类别列表页面的render()函数.

最近我为我的FlatList View添加了分页,所以当用户滚动到底部时,onEndReached在某个点(从底部开始的onEndReachedThreshold值长度)被调用,它将获取下一个类别并连接类别props.

但我的问题是在调用render()时调用onEndReached.换句话说,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);
    }
  }

尝试在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;
    }
}

react-native – FlatList在呈现时调用`onEndReached`

猜你在找的React相关文章