react-native之上拉加载，下拉刷新组件封装

##react-native 自定义封装刷新组件

###几个月没写博客了，最近一直在写react 和react-native，前几天刚发了一版基于react-native混合开发的App,这几天赶快总结下。

写过java的同学，再去学习react和react-native就会比较容易上手，并且会有一种似曾相识的感觉，不错，今天我要总结的刷新功能就和Android原生的实现很类似，在Android原生当中，可以说是家喻户晓了，在react-native中实现也是一样的简单，在rn的升级中，FlatList是listView的升级版，就好比如RecyclerView是listView的升级版一样。OK, 废话不多话说。

#目录
##1.FlatList常用的属性方法
##2.封装一个上拉加载，下拉刷新的组件

---

1.FlatList常用的属性方法

1. data: ?Array 为了简化起见，data属性目前只支持普通数组。
2. renderItem: (info: {item: ItemT, index: number}) => ?React.Element 根据行数据data渲染每一行的组件
3. onRefresh?: ?() => void 如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。
4. refreshing?: ?boolean 在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号。
5. onEndReachedThreshold?: ?number 决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。
6. onEndReached?: ?(info: {distanceFromEnd: number}) => void 当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
7. ItemSeparatorComponent?: ?ReactClass 行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。
8. keyExtractor: (item: ItemT, index: number) => string 此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取item.key作为key值。若item.key也不存在，则使用数组下标。
9. ListHeaderComponent?: ?ReactClass 头部组件
10. ListFooterComponent?: ?ReactClass 尾部组件
11. ListEmptyComponent?: ?ReactClass | React.Element 列表为空时渲染该组件。可以是React Component, 也可以是一个render函数， 或者渲染好的element。
12. extraData?: any 如果有除data以外的数据用在列表中（不论是用在renderItem还是Header或者Footer中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新。

###注：当然还有其他的属性方法，请自行查阅文档FlatList

##2.封装一个上拉加载，下拉刷新的