React Native之FlatList，listview的升级版

RN的0.43版终于出来了，现在大家期待已久的listview的升级版flatlist终于跟大家见面了，我也是关注了好久哦，现在将使用说明，和例子给大家简单的讲解下。

简单的讲解下api：

flatlist在数据量很大的情况下，比listview性能要高好多哦，就是基于组件<VirtualizedList>的封装，具体的api大家可以看中文网的介绍：http://reactnative.cn/docs/0.43/flatlist.html#content。

这里就不介绍有哪些api了，这里介绍下具体的使用方法：

先看下图吧

flatlist debug模式

flatlist 

上面的内容是FB的uiexplorer里面的例子，代码可以查看FlatListExample，下面分析下源码：

---

一、首先引入了ListExampleShared封装的一些小组件，

里面有：

    FooterComponent,    //这是flatlist底部的组件，相当于listview的renderFooter

    HeaderComponent, // 这是flatlist头部组件

    ItemComponent, // 这是每一条数据要显示的内容

    PlainInput,  //这是对textinput的一个简单封装

    SeparatorComponent, // 这是行组件之间的分割符，可以自定义

    Spindicator, //这是一个旋转的指示器，一个简单的动画

    genItemData, //这是数据源，里面是一个datablob

    getItemLayout,

    pressItem,

    renderSmallSwitchOption,

---

二、创建FlatList动画

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

---

三、render具体的代码

render代码

其他的代码略过了，render方法里面的AnimatedFlatList就是主要的内容，其中内部的前三个（ItemSeparatorComponent、ListHeaderComponent、ListFooterComponent）就不在介绍了。

3.1、data是数据源，这里用的是正则匹配，因为最开始的图内部有textinput搜索，搜索的内容配到到数据源中并显示出来，数据源的代码如下：

const filterRegex = newRegExp ( String(this.state.filterText),'i' );

const filter = (item)=>(

    filterRegex.test(item.text) || filterRegex.test(item.title)

);

const filteredData = this.state.data.filter(filter);

这个filteredData就是数据源了，但是现在有个问题是只能匹配到已经渲染出来的数据，这个例子中初始的数据是100条，假设你输入了101，就匹配不到了。

3.2、debug是否是开发模式。

3.3、disableVirtualization只有在debug模式下才打开( true )，这是个boolean值，用来优化内存和显示用的，也就是在render window外面完全卸载react实例的

3.4、getItemLayout是在item固定高度的时候才用的，如果指定了SeparatorComponent，分割线的尺寸也要算到offset中

3.5、horizontal 是否是水平布局

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

3.7、numColumns是布局的列数，这里是1

3.8、onEndReached是滑动到底部的回调函数，这里做的是在数据源中再添加100条数据

3.9、onRefresh下拉刷新的回调

3.10、onScroll滑动时的回调，对应的偏移量设置，这里还用到原生加速

3.11、onViewableItemsChanged可见区域发生变化的回调，是由viewablePercentThreshold属性定义的，实例中的代码是打印可见区域内变化的item

3.12、refreshing是否刷新

3.13、renderItem：单个item组件的渲染

3.14、viewabilityConfig这是view的配置项，在ViewabilityHelper里面，有四个可配置项，（minimumViewTime、viewAreaCoveragePercentThreshold、itemVisiblePercentThreshold、waitForInteraction）

---

四、SectionList

这个是带有固定头部的list，和listview的renderSectionHeader提供类似的功能，具体大家可以看下SectionList，

---

这里就不详细讲解了，更深入的了解，大家还是看下react-native下面的源码吧