如何使用 Firestore 数据在 React Native 中实现虚拟滚动 FlatList？答案

【问题标题】：How to implement a virtual scrolling FlatList in React Native with Firestore data?如何使用 Firestore 数据在 React Native 中实现虚拟滚动 FlatList？
【发布时间】：2019-07-10 19:36:48
【问题描述】：

我想知道是否有人使用 firestore 提供的数据实现了虚拟滚动 FlatList？我目前正在将 onEndReached 与一个处理程序一起使用，该处理程序重新触发一个 firestore 查询，其中“limit”选项每次增加 10。工作正常，但有一个问题，如果我在最后继续滚动，“限制”值只会不断增加。实现我所追求的最佳方式是什么？（我不是在寻找“加载更多”按钮。而是在接近列表末尾时加载更多数据。我正在使用 react-redux-firebase 和 redux-firestore 包进行数据检索）

【问题讨论】：

您是提前预取一些记录还是您的代码按需获取记录？
最初获取 20 条记录，然后每次用户到达列表末尾时获取 10 条记录。

标签： reactjs firebase react-native google-cloud-firestore

【解决方案1】：

在 onEndReached handler 上，只需检查 firestore 中记录的长度是否等于或小于总增量。假设 firestore 有 103 条记录，您现在增加了 10 次，并且您的列表在 11 日（增量）有 100 个项目，您的列表将增加到 110，但 firestore 中的记录没有 103

【讨论】：