跳到主要内容
版本:Next

使用列表视图

React Native 提供了一系列用于展示数据列表的组件。通常,你会想使用 FlatListSectionList

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

FlatList 组件需要两个属性:datarenderItemdata 是列表的信息来源。renderItem 会从数据源中取出一个项目,并返回一个用于渲染的格式化组件。

这个示例创建了一个基础的 FlatList,数据是硬编码的。data 属性中的每一项都会渲染为一个 Text 组件。然后,FlatListBasics 组件会渲染 FlatList 和所有 Text 组件。

如果你想渲染一组按逻辑分组的数据,可能还带有分组标题,类似于 iOS 上的 UITableView,那么就应该使用 SectionList

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