FlatList 在渲染时调用 \`onEndReached\`

Question

这是我简单的 category list page 的 render() 函数。

最近我为我的 FlatList 视图添加了分页，所以当用户滚动到底部时， onEndReached 在某个点被调用（ onEndReachedThreshold 从底部开始的值长度，它将获取下一个 categories 并连接类别道具。

但我的问题是 在调用 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);
    }
  }

原文由 merry-go-round 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Ilario 发布，翻译遵循 CC BY-SA 3.0 许可协议