Skip to main content

使用列表视图

React Native 提供了一套用于渲染数据列表的组件。通常,你需要使用 FlatListSectionList

¥React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either FlatList or SectionList.

FlatList 组件显示不断变化但结构相似的数据的滚动列表。FlatList 适用于长数据列表,其中项目数量可能随时间变化。与更通用的 ScrollView 不同,FlatList 仅渲染当前显示在屏幕上的元素,而不是同时渲染所有元素。

¥The FlatList component displays a scrolling list of changing, but similarly structured, data. FlatList works well for long lists of data, where the number of items might change over time. Unlike the more generic ScrollView, the FlatList only renders elements that are currently showing on the screen, not all the elements at once.

FlatList 组件需要两个 props:datarenderItemdata 是该列表的信息来源。renderItem 从源中获取一项并返回一个格式化组件以进行渲染。

¥The FlatList component requires two props: data and renderItem. data is the source of information for the list. renderItem takes one item from the source and returns a formatted component to render.

此示例创建基本的 FlatList 硬编码数据。data props 中的每个项目都渲染为 Text 组件。然后,FlatListBasics 组件渲染 FlatList 和所有 Text 组件。

¥This example creates a basic FlatList of hardcoded data. Each item in the data props is rendered as a Text component. The FlatListBasics component then renders the FlatList and all Text components.

如果你想要渲染一组分成逻辑部分的数据,可能带有部分标题,类似于 iOS 上的 UITableView,那么 SectionList 是最佳选择。

¥If you want to render a set of data broken into logical sections, maybe with section headers, similar to UITableViews on iOS, then a SectionList is the way to go.

列表视图最常见的用途之一是显示从服务器获取的数据。为此,你需要 了解 React Native 中的网络

¥One of the most common uses for a list view is displaying data that you fetch from a server. To do that, you will need to learn about networking in React Native.