使用列表视图
非官方测试版翻译
本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →
React Native 提供了一系列用于展示数据列表的组件。通常你会选用 FlatList 或 SectionList。
FlatList 组件用于展示一个可滚动的列表,其中的数据会变化但结构相似。FlatList 特别适合处理长列表数据,尤其是当列表项数量可能随时间变化的情况。与更通用的 ScrollView 不同,FlatList 只会渲染当前屏幕上显示的元素,而非一次性渲染所有内容。
FlatList 组件需要两个关键属性:data 和 renderItem。data 是列表的数据源,renderItem 则负责从数据源中提取单个项目并返回格式化好的渲染组件。
这个示例创建了一个基础 FlatList,使用硬编码数据。data 属性中的每个条目都会被渲染为 Text 组件,最后由 FlatListBasics 组件统一渲染 FlatList 和所有 Text 元素。
如果你想要渲染一组被分成逻辑分组的数据(可能需要包含分组标题),类似于 iOS 中的 UITableView,那么 SectionList 就是最佳选择。
列表视图最常见的用途之一是展示从服务器获取的数据。为此,你需要先学习 React Native 中的网络相关知识。