Question

基本上，我正在创建一个交易历史记录供稿，如果用户的交易量非常可笑，那么它将滞后，因为我的应用正在尝试呈现滚动视图的全部内容

在Twitter上，我看到它们会渲染约50条推文，然后当您到达底部并拉动它时，将显示一个ActivityIndicator然后再渲染另外50条推文

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

Answer 1

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

首先，您需要确保用于进行这些交易的API端点支持分页。

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

第一次呈现组件时，会提取首页
每次用户点击列表的底部（并显示加载指示符）时，都会提取并呈现下一页（来自上述API端点）。

在 React Native 中，您可以使用<Flatlist />组件来实现。它有一个名为onEndReached的道具，可让您建立这种行为。您还可以使用onEndReachedThreshold控制何时进行下一页的提取。两种道具的摄录效果都很好。

由您决定每个页面上有多少笔交易，但是50个应该安全。

Answer 2

使用平板列表可以轻松实现此行为。在 onEndReached 上有一个称为prop的道具，当用户到达列表末尾时会被调用。您基本上可以在此回调中点击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
}

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

2 个答案: