如果当前结果没有填满React native中的页面,如何查询/延迟加载下一批



我目前正在构建一个日历计划视图功能,其中Month title作为Header,days作为items。我目前正在获取大约6周的日历事件。如果数据不存在,它仍然会覆盖页面,我可以使用onScrollEnd通过useQuery查询更多数据。

但是,我正在尝试优化我的日历功能,查询6周的事件并不理想,而且需要时间加载。因此,我试图找到一种方法,如果我可以查询,比如说一周的数据,如果没有足够的数据(比如1-2个事件(来覆盖屏幕(供用户调用onScrollEnd(,那么查询下一批等等,最后用备忘录包装容器,以帮助提高加载速度和根据需要延迟加载数据。你知道这怎么可能吗?

我看过各种懒惰加载的例子,例如:

  • https://snack.expo.dev/@johnborges/044274

等等,但我的问题是,在这些代码示例中,它们没有涵盖第一批或第二批/页面的数据减少以及自动查询下一页的可能性。

我也想过使用与SectionList嵌套的FlatList,但最后得出的结论是,这是不可能的,数据将被渲染两次。

我想发生的事情:

<Schedule> --> component
render → Coordinate which Month in the SectionList should paginate through the events
<SectionList>
onEndReached → create more months
<Month> 
<FlatList>
render → <Event  />
onEndReached → fetch more events
<FlatList>
</Month>
</SectionList>
<Schedule>

所以有两个";onEndReached";触发器,一个用于当用户向下滚动整个页面时创建更多月份,另一个用于在用户向下滚动当前月份时获取更多事件。

Month组件应该一次只加载1周的事件,并在用户滚动时进行分页。。不知何故,我需要一些方法来弄清楚,如果当前一周没有足够的数据来覆盖屏幕,那么查询更多的数据,这样就可以始终显示整页。。。如有任何帮助/想法,我们将不胜感激。谢谢:(。

我会尝试测量最后一个元素的y位置。如果y位置离底部不够近,请获取更多项目。将上一次提取存储在状态中。将新获取添加到该状态。

相关内容

  • 没有找到相关文章

最新更新