ReactNative FlatList是否有方法跟踪用户是否滚动到另一端？

jv4diomz 于 2023-05-18 发布在 React

关注(0)|答案(2)|浏览(108)

我正在用React Native构建一个聊天应用程序。为了呈现消息，我使用<FlatList。我注意到，如果消息列表太长，会出现性能问题。我的想法是修剪较新的消息时，用户向上滚动，并加载他们再次从后端，当用户向下滚动。到目前为止，我只能通过使用onEndReached={loadOlder}来实现这一点

<FlatList
 data={messagesRendered}
 ...
 onEndReached={loadOlder}
 onOtherEndReached={loadNewer}

是否有一个选项来跟踪如果用户滚动回到列表的开始并把这个伪代码onOtherEndReached=..变成一个真实的的？
也欢迎任何其他关于如何处理长名单的建议

react-native

来源：https://stackoverflow.com/questions/76258831/reactnative-flatlist-is-there-a-way-to-track-if-user-scrolled-to-the-other-end

2条答案

按热度按时间

qnakjoqk1#

Flatlist中没有支持此功能的prop，但可以通过使用onScroll prop并检查事件中的滚动值来实现。

const onScroll = (event) => {
  const { contentOffset } = event.nativeEvent;

  if (contentOffset.y === 0) {
    // User has scrolled to the very top
    loadNewer()
  }
};

return (
  <View>
    <FlatList
      onScroll={onScroll}
    />
  </View>
);

更快的列表性能

对于您的用例，可能值得查看一个回收器列表，例如Shopify's FlashList，与React Native的FlatList相比，它可以提高性能。

赞(0）回复(0）举报 2023-05-18

jucafojl2#

这个功能被称为 Pull to Refresh，它在官方的React Native文档中。（https://reactnative.dev/docs/flatlist）查看onRefresh和refreshing prop 。
检查Examplehere，其中它使用了这些props，但用于ScrollView（尽管它们的工作方式相同）。
因此，您可以使用测试代码，使用FlatList更改 ScrollView（props保持不变），并使用获取更新项的代码更改setTimeout(...,2000)。
注意：MK de Silva提到的Shopify FlashList似乎接受Pull to Refresh（here）的相同 prop

赞(0）回复(0）举报 2023-05-18

我来回答

ReactNative FlatList是否有方法跟踪用户是否滚动到另一端？

2条答案

更快的列表性能

相关问题

热门标签

最新问答