跳到主要内容

使用列表视图

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

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

FlatList 组件需要两个 props:datarenderItemdata 是列表的信息来源。renderItem 接受来自来源的一个项目,并返回一个格式化的组件进行渲染。

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

如果你想渲染一组数据,这些数据被分成逻辑 sections,可能带有 section headers,类似于 iOS 上的 UITableView,那么 SectionList 是你的选择。

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