React本机列表：通过滚动加载更多

This piece demonstrates how to load more items in a FlatList component as you scroll down, as well as how to persist lists on device storage, and keep those lists in sync as more items are loaded.

这篇文章演示了如何在向下滚动时在FlatList组件中加载更多项目，以及如何将列表持久保存在设备存储中以及如何在加载更多项目时使这些列表保持同步。

The demo accompanying this piece (available here on GitHub) demonstrates what we’ll achieve, with more items loading from an external data source as the list is being scrolled down. Not only this, the list is persisted on device and in state as more items are loaded.

伴随着这片(可用的演示在这里 GitHub上)证明我们会实现，有更多的项目从外部数据源加载的列表被向下滚动。 不仅如此，该列表会在设备上保持持久状态，并在加载更多项目时保持状态。

The following screencast summarises the process. Note that when we start scrolling more results begin to load immediately. In addition, more results are continuously loaded if the end of the list has been reached. This is due to the onEndReachedThreshold prop of FlatList, that triggers an event to load more items if the scroll position is within this threshold. This behaviour can be seen here:

以下截屏视频总结了该过程。 请注意，当我们开始滚动时，更多结果将立即开始加载。 此外，如果已到达列表的末尾，则会连续加载更多结果。 这是由于onEndReachedThreshold的FlatList ，如果滚动位置在此阈值内，则触发一个事件以加载更多项目。 可以在这里看到此行为：

Loading more items while scrolling

滚动时加载更多项目

Notice when the list starts very small (5 items in the above example), the end of the list is on screen from the start. This triggers a load more event as soon as the user starts scrolling.

请注意，当列表开始时很小(上例中为5个项目)时，列表的结尾从头开始显示在屏幕上。 一旦用户开始滚动，就会触发更多加载事件。

We’ll be utilising some supported props of FlatList to display a header that reflects the total amount of items in a list, and a footer that displays a text when more items are being loaded. Importantly, FlatList comes with event listeners out of the box that can be utilised to trigger a load more function.

我们将利用FlatList一些受支持的道具来显示可反映列表中项目总数的页眉，以及在加载更多项目时显示文本的页脚。 重要的是， FlatList提供了开箱即用的事件监听器，可用于触发更多加载功能。

Before exploring the JavaScript, let’s briefly recap how load more functionality can benefit your app and user experience as a whole.

在探索JavaScript之前，让我们简要回顾一下如何加载更多功能可以使您的应用程序和用户体验整体受益。

为什么加载更多重要 (Why Loading More is Important)

The need for a load more function in your apps become very apparent when lists begin getting long, whether that be displaying product lists, saved items, browsing history, or any other type of list that your app may need to display. Fetching longer lists of records becomes more problematic when they take a while to aggregate server-side, leaving the user waiting a prolonged period before the list is returned and rendered in-app.

当列表开始变长时，无论是显示产品列表，已保存的物品，浏览历史记录，还是您的应用可能需要显示的任何其他类型的列表，在应用程序中加载更多功能的需求就变得很明显。 当获取较长的记录列表需要花费一些时间在服务器端进行汇总时，问题变得更加棘手，从而使用户需要等待较长的时间才能返回列表并在应用程序中进行呈现。

A common place to populate list content is when a user signs in to their account. At this stage, user settings and saved items relating to the user account are populated into the app’s Dashboard and on-device data storage. For example, the following illustration considers some of the lists needed for an eCommerce application:

填充列表内容的常见位置是用户登录其帐户时。 在此阶段，与用户帐户有关的用户设置和保存的项目将填充到应用程序的仪表板和设备上的数据存储中。 例如，下图考虑了电子商务应用程序所需的一些列表：

Pre-populating app list content as a user signs in.

用户登录时预填充应用列表内容。

This initial setup can be a time consuming process depending on how much content needs to be fetched and how that data is aggregated server-side. To prevent this initial account setup from taking too long, such lists need to be limited, but without sacrificing the user experience or removing detail from each list item.

根据需要获取多少内容以及如何在服务器端聚合数据，此初始设置可能是一个耗时的过程。 为了防止此初始帐户设置花费太长时间，需要限制此类列表，但又不能牺牲用户体验或从每个列表项中删除详细信息。

This is concretely why a load more function is useful — it allows us to pre-populate lists quickly with a small amount of items, say 5 to 10 records, but leaves the door open to fetch more in the event the user is interested in browsing them.

这就是为什么加载更多功能有用的具体原因-它使我们能够快速填充少量项目(例如5到10条记录)的列表，但如果用户有兴趣浏览，则可以敞开大门以获取更多信息他们。

Apps feel a lot more responsive when lists are limited to a few initial items. The user’s interest to view more items is then signalled rather naturally by scrolling down the list, and this is when additional requests to load more items should be made. This is the scenario we are after, and React Native provides some very useful props that allow us to do just this.

当列表仅限于一些初始项时，应用程序会感觉更加敏感。 然后ÿ