使用长列表视图组件
React-Native
提供了多种适用于展示列表数据的组件,通常来说,你可以选用FlatList或SectionList。
FlatList
组件适用于展示一个滚动列表,其中的元素应当保持结构基本一致而仅仅是数据不同。
FlatList
组件设计之初就是用来展示长列表数据的,在生命周期中可以任意增减元素(增减元素并不会导致组件全部刷新),同时FlatList
与ScrollView
相比,差异在于其并不会渲染未被展示部分的数据。
FlatList
组件需要两个配置属性(props
):data
和 renderItem
。data
用于接收存储元数据,renderItem
则作为结构范例,用于逐个解析元数据并返回一个格式化组件供以渲染。
下面的例子创建了一个简单的FlatList
,并预设了一些模拟数据。首先是初始化FlatList
所需的data
,其中的每一项(行)数据之后都在renderItem
中被渲染成了Text
组件,最后构成整个FlatList
。
如果你希望将一组数据渲染为逻辑结构,比如类似于ios
系统的UITableViews
类的section
的头部,那么SectionList将是一个不错的选择。
列表组件通常会用于展示从服务端拉取的数据,要实现这一过程,您需要学习网络章节。