之前使用的组件是ListView，当时要添加一个下拉刷新，上拉加载的功能，所以对ListView做了一些封装，但是后来看官方文档，不建议再使用ListView，因为效率问题，做过Android的朋友都知道，Android的ListView如果不自己处理一下，也是有效率问题的。所以官方又推出了FlatList，而且自带上拉下拉的功能。
功能简介
- 完全跨平台。
- 支持水平布局模式。
- 行组件显示或隐藏时可配置回调事件。
- 支持单独的头部组件。
- 支持单独的尾部组件。
- 支持自定义行间分隔线。
- 支持下拉刷新。
- 支持上拉加载。
- 支持跳转到指定行（ScrollToIndex）。
如果需要分组/类/区（section），请使用SectionList(这个我们会在之后的文章中介绍)
使用
FlatList如果只做简单使用也是很简单的，这里我们会分难以程度，逐渐介绍：
直接使用
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>
可以看出跟之前的ListView很像，但是其中少了dataSource，这里，我们只需要传递数据，其它的都交给FlatList处理好了。
属性说明
- ItemSeparatorComponent行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。在这里可以根据需要插入一个view
- 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={(data, index) => ( {length: 行高, offset: 行高 * index, index} )}注意如果你指定了SeparatorComponent，请把分隔线的尺寸也考虑到offset的计算之中。