使用列表视图
React Native 提供了一套组件用于展示数据列表。通常,你会想要使用 FlatList 或 SectionList。
FlatList
组件显示一个可滚动的列表,其中包含不断变化但结构相似的数据。FlatList
非常适合长列表数据,其中项目的数量可能会随时间变化。与更通用的 ScrollView
不同,FlatList
仅渲染当前在屏幕上显示的元素,而不是一次渲染所有元素。
FlatList
组件需要两个 props:data
和 renderItem
。data
是列表的信息来源。renderItem
接受来自来源的一个项目,并返回一个格式化的组件进行渲染。
这个例子创建了一个包含硬编码数据的基本 FlatList
。data props 中的每个项目都渲染为一个 Text
组件。然后 FlatListBasics
组件渲染 FlatList
和所有 Text
组件。
如果你想渲染一组数据,这些数据被分成逻辑 sections,可能带有 section headers,类似于 iOS 上的 UITableView
,那么 SectionList 是你的选择。
列表视图最常见的用途之一是显示从服务器获取的数据。为此,你需要学习 React Native 中的网络请求。