使用长列表
React Native 提供了几个适用于展示长列表数据的组件,一般而言我们会选用FlatList或是SectionList。
FlatList
组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同。
FlatList
更适于长列表数据,且元素个数可以增删。和ScrollView
不同的是,FlatList
并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。
FlatList
组件必须的两个属性是data
和renderItem
。data
是列表的数据源,而renderItem
则从数据源中逐个解析数据,然后返回一个设定好格式的组件来渲染。
下面的例子创建了一个简单的FlatList
,并预设了一些模拟数据。首先是初始化FlatList
所需的data
,其中的每一项(行)数据之后都在renderItem
中被渲染成了Text
组件,最后构成整个FlatList
。
如果要渲染的是一组需要分组的数据,也许还带有分组标签的,那么SectionList
将是个不错的选择
列表的一个常用场景就是从服务器端取回列表数据然后显示,要实现这一过程,你可能还需要学习React Native 的网络相关用法.