FlatList中未调用onEndReached触发器

Question

预期的行为：在页面到达末尾时，应该调用handleLoadMore函数。但是它没有被调用。 [使用功能组件]。

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

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

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

HandleLoadMore函数-

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

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

控制台输出-

Answer 1

您可能需要将<div class="box-authentication" id="dvCreate"> <input id="emmail_register" name="emmail_register" type="text" class="form-control"> <button type="submit" id="btnCreate" class="button" name="submit" value="create">Create User</button> </div> <div class="box-authentication" id="dvLogin"> <input id="emmail_register" name="emmail_register" type="text" class="form-control"> <button type="submit" id="btnLogin" class="button" name="submit" value="create">Login Usre</button> </div> 绑定到该类。来自The React Docs

  

通常，如果您引用的方法后面没有（），例如   handleLoadMore，您应该绑定该方法。

Answer 2

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

代替使用“ View”包装程序的“ ScrollView”解决了该问题。

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