使用列表视图
React Native 提供了一套用于渲染数据列表的组件。通常,你需要使用 FlatList 或 SectionList。
¥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:data
和 renderItem
。data
是该列表的信息来源。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 UITableView
s 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.