跳到主要内容

使用列表视图

React Native 提供了一套用于呈现数据列表的组件。通常,你会选择使用 FlatListSectionList

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

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

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

如果你想渲染一组按逻辑划分的数据,可能带有章节标题,类似于 iOS 上的 UITableViews,那么 SectionList 是你的不二之选。

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