在 FlatList 中未调用 onEndReached 触发器

Question

预期行为：在页面到达结束时，应调用 handleLoadMore function。 但它没有被调用。 [使用功能组件]。

我已经尝试过以下方式。 但没有找到任何解决方案。

使用FlatGrid组件（基于 FlatList 的库）。 也直接使用了 FlatList。 问题仍然存在。

      <FlatGrid
        itemDimension={130}
        items={offers}
        renderItem={renderItem}
        ListFooterComponent={renderFooter}
        initialNumToRender={2}
        maxToRenderPerBatch={1}
        windowSize={2}
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0}
      />

HandleLoadMore function -

  const handleLoadMore = () => {
    setPageNumber(pageNumber + 1);

    console.log('PageNumber', pageNumber);
    console.log('Item Length', offers.length);
    offersAction.getOffers(pageNumber);
  };

控制台 Output -

Answer 1

您可能需要将handleLoadMore绑定到 class。 来自React 文档

一般来说，如果引用的方法后面不带 ()，比如onClick={this.handleClick} ，就应该绑定那个方法。

Answer 2

我在父组件中使用 ScrollView 作为 FlatList 的包装器。 正如https://github.com/facebook/react-native/issues/14756中提到的那样，这是造成问题的原因。

而不是使用“View”包装器的“ScrollView”解决了这个问题。

<View style={{ flex: 1 }}>