跳到主要内容

使用列表视图

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

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

FlatList 组件需要两个属性:datarenderItemdata 是列表数据的来源。renderItem 接收数据源中的一个项目并返回一个格式化组件以渲染该项目。

下面的例子创建了一个使用硬编码数据的基础 FlatListdata 属性中的每个项目都渲染成一个 Text 组件。FlatListBasics 组件渲染了 FlatList 以及所有的 Text 组件。

如果你想渲染一组分成逻辑分区的数据,可能还带有分区头部,类似于 iOS 上的 UITableView,那么使用 SectionList 会更合适。

列表视图最常见的用例之一是显示从服务器获取的数据。要实现这一点,你需要学习 React Native 中的网络相关知识