Reactjs 如何在滚动视图中呈现有限的内容？

基本上，我正在创建一个事务历史提要&如果用户有大量的事务，它将延迟，因为我的应用程序试图呈现滚动视图的全部内容

在Twitter上，我看到他们会显示大约50条tweets，然后当你到达底部并拉动它时，会显示一个ActivityIndicator，然后再显示另外50条tweets

---

如何在React Native中获得这种行为？

这是一个相当简单的解决方案，称为延迟加载。

首先，您需要确保用于获取这些事务的API端点支持分页。

Twitter应用程序的工作方式是：

第一次呈现组件时，将获取第一页

每次用户点击列表底部（并显示加载指示器）时，将获取并呈现下一页（来自上述API端点）

在React Native中，您可以使用

组件来实现这一点。它有一个名为的道具，允许您构建此行为。您还可以使用来控制下一页获取的发生时间。这两个道具都做得很好

---

由您决定每页上有多少事务，但您应该有50个事务是安全的。

使用flatlist可以轻松实现此行为。有一个名为ononedreached的道具，当用户到达列表末尾时会调用该道具。基本上，您可以在此回调中点击api以获得更多结果，并将该数据附加到列表中，这将自动用新数据刷新列表

<FlatList
data={data} //coming from state or redux
onEndReached={() => this.getMoreData()}
/>

const getMoreData=()=>{
 //in this function hit the api and append the data to the existing list
}

this.getMoreData（）}
/>
常量getMoreData=（）=>{
//在此函数中，点击api并将数据附加到现有列表中
}

基本上，您必须将

onEndReached

与

onEndReached threshold

一起使用，当滚动接近屏幕底部时，调用回调，因此您必须处理回调中的所有逻辑，以从api获得更多结果。