在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代可以看到特别是0.50之后React Native的组件库在不断地壮大React Native也正在越来越稳定。

随着版本的升级React Native引进了一些新的组件中如FlatList、SectionList等具有更高性能的列表组件也有与时俱进的用于适配全屏幕的SafeAreaView组件同时一些性能比较差、无法适应React Native发展的一些老的组件也逐渐被抛弃如ListView、Navigator等组件。

下面是一张说明图来自于网络 

FlatList简介

总所周知为了实现列表的效果React Native提供了ListView组件并且通过对ListView进行简单的封装ListView还可以实现下拉刷新和上拉加载的功能。 
但是如果对ListView比较了解的同学都会发现ListView的性能是非常差的所以React Native在0.43版本推出了FlatListFlatList自带上拉下拉的功能用于替换ListView。

FlatList功能简介

FlatList支持如下功能

• 完全跨平台

• 支持水平布局模式

• 行组件显示或隐藏时可配置回调事件

• 支持单独的头部组件

• 支持单独的尾部组件

• 支持自定义行间分隔线

• 支持下拉刷新

• 支持上拉加载更多

• 支持跳转到指定行ScrollToIndex。

注如果需要实现分组/类/区的效果请使用<SectionList>组件。

FlatList实例

FlatList的使用也非常的简单下面是

可以看出FlatList跟之前的ListView很像但是其中少了dataSource我们只需要传递数据其它的都交给FlatList处理好了。之前ListView组件的使用如下让我们对比来看

属性说明

• ItemSeparatorComponent 
  行与行之间的分隔线组件不会出现在第一行之前和最后一行之后。

• ListEmptyComponent 
  列表为空时渲染该组件可以是React Component也可以是一个render函数 或者渲染好的element。

• ListFooterComponent 
  尾部组件。

• ListHeaderComponent 
  头部组件。

• columnWrapperStyle 
  如果设置了多列布局即将numColumns 
  值设为大于1的整数则可以额外指定此样式作用在每行容器上。

• data 
  为了简化起见data属性目前只支持普通数组如果需要使用其他特殊数据结构例如immutable数组请使用更底层的VirtualizedList组件。

• extraData 
  如果有除data以外的数据作用在列表中不论是用在renderItem 
  还是Header或者Footer中请在此属性中指定作用的对象。同时此数据在修改时也需要先修改其引用地址比如先复制到一个新的Object或者数组中然后再修改其值否则界面很可能不会刷新。

• getItem 

• 获取每个Item。

• getItemCount 
  获取Item个数。

• getItemLayout 
  getItemLayout是一个可选的优化用于避免动态测量内容尺寸带来的开销不过前提是你可以提前知道内容的高度。也就是说如果你的行高是固定的那么getItemLayout用起来就既高效又简单类似下面这样 

• 注意如果你指定了SeparatorComponent请把分隔线的尺寸也考虑到offset的计算之中。

• horizontal 
  当此属性设置为true时则变为水平布局模式。

• initialNumToRender 
  指定一开始渲染的元素数量最好刚刚够填满一个屏幕这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载这样是为了保证用户执行返回顶部的操作时不需要重新渲染首批元素。

• initialScrollIndex 
  指定渲染开始的item index。

• inverted 
  翻转滚动方向实质是将scale变换设置为-1。

• keyExtractor 
  此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体以便在刷新时能够确定其变化的位置减少重新渲染的开销。若不指定此函数则默认抽取item.key作为key值若item.key也不存在则使用数组下标。

• legacyImplementation 
  设置为true则使用旧的ListView的实现。

• numColumns 
  多列布局只能在非水平模式下使用即必须是horizontal={false} 
  时。此时组件内元素会从左到右从上到下按Z字形排列类似启用了flexWrap的布局且组件内元素必须是等高的暂时还无法支持瀑布流布局。

• onEndReached 
  当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。

• onEndReachedThreshold 
  决定当距离内容最底部还有多远时触发onEndReached回调注意此参数是一个比值而非像素单位。比如0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。

• onRefresh 
  如果设置了此选项则会在列表头部添加一个标准的RefreshControl 
  控件以便实现“下拉刷新”的功能同时你需要正确设置refreshing 
  属性。

• onViewableItemsChanged 
  在可见行元素变化时调用可见范围和变化频率等参数的配置请设置viewabilityconfig属性。

• refreshing 
  在等待加载新数据时将此属性设为true列表就会显示出一个正在加载的符号。

• renderItem 
  根据行数据data渲染每一行的组件。

• viewabilityConfig 
  请参考ViewabilityHelper的源码来了解具体的配置。

方法

• scrollToEnd 
  滚动到底部如果不设置getItemLayout属性的话可能会比较卡。

• scrollToIndex 
  滚动到指定index的item如果不设置getItemLayout属性的话无法跳转到当前可视区域以外的位置。

• scrollToItem 
  滚动到指定item如果不设置getItemLayout属性的话可能会比较卡。

• scrollToOffset 
  滚动指定距离。

复杂实例

下面是一个复杂的实例效果如图

源码如下

FlatList项目实战

首先我们看一下实现的效果这也是我之前《React Native移动开发实战》中的一个项目。 

上拉加载下拉刷新控件封装

源代码如下

编写子布局

编写主界面

为了方便我们直接使用本地的数据主界面的代码如下

数据的话大家可以参考下面的格式

网络请求

上面是使用的是本地的Json数据那么如果加载网络的数据又该怎么做呢下面给一个简单的参考实例。 
首先我们在componentDidMount()函数中发起请求代码如下

然后我们使用fetch来真正的发起请求该段代码如下

根据异步返回的结果我们来改变RefreshListView控件的不同显示状态RefreshListView的显示状态又

当然为了方便查看数据的返回情况我们一般会使用调试来观察数据进而进行数据的相关处理。如下图 

本文转载自异步社区

原文链接https://www.epubit.com/articleDetails?id=Na66ab65a-2cdb-4826-8af0-ffe04f7888a2