react-native---rn中的列表组件（FlatList）

react-native使用FlatList组件进行列表渲染，并使用data+renderItem对列表中单元组件进行配置，相当于HTML中ul/ol+li。

---

• FlatList功能：

 - 完全跨平台。
 - 支持水平布局模式。
 - 行组件显示或隐藏时可配置回调事件。
 - 支持单独的头部组件、尾部组件、分割线组件以及空数据默认组件。
 - 支持下拉刷新、上拉加载。
 - 支持跳转到指定行

---

• FlatList属性（组件）：
  FlatList中部分属性，其值相关于组件，或函数渲染组件或已定义静态组件；

1. ItemSeparatorComponent //分割线组件，单元之间的空格，首行前以及尾行末不会生效
2. ListEmptyComponent //空数据组件，data属性为空时，默认渲染组件
3. ListFooterComponent //尾部组件
4. ListHeaderComponent //头部组件

---

• FlatList属性（功能）：
  FlatList组件还有一些属性用于设置渲染数据、布局等。

0. numColumns//非水平模式下多列布局，列向个数，值为整数， 如numColumns={3}表示垂直方向三列

1. columnWrapperStyle //多列布局时，额外指定此样式作用在每行容器上,值为对象

2. data //用于渲染各项所用数据，值为数据

3. extraData //data以外数据存放处，如首尾组件、单项组件使用数据

4. horizontal //设置水平/垂直布局，值为bool，true表示水平，false为垂直，默认值为false

5.legacyImplementation //设置为true时，使用旧版ListView实现

6. refreshing //加载符号，设置为true时，会显示loading图标

7. initialScrollIndex//类型整数，作为开屏顶端元素的索引，

8.initialNumToRender//开屏渲染列表单元项的数量

9. inverted//bool值翻转滚动方向。实质是将scale变换设置为-1。

10. onEndReachedThreshold//值为Number型，用于设置列表滚动到底部触发函数的边界值 

---

• FlatList属性（函数）：

1.getItemLayout

getItemLayout={(data, index) => ( {length: 行高, offset: 行高 * index, index} )}

/getItemLayout是一个可选的优化，用于避免动态测量内容尺寸的开销，不过前提是你可以提前知道内容的高度。如果你的行高是固定的，getItemLayout用起来就既高效又简单.注意如果你指定了SeparatorComponent，请把分隔线的尺寸也考虑到offset的计算之中。

2.keyExtractor

(item: ItemT, index: number) => string

用于生成一个唯一的key作为列表中每一项的身份标识，如果react与vue中数组遍历下的key

3.renderItem

({item,...})=><Component />

必传参数item，后面可选参数，函数返回值为单元组件

4.onEndReached

()=>{}

当列表滚动到距离底部为属性中所设置的onEndReachedThreshold时候，触发的事件

5.onRefresh

()=>{}

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

6.onViewableItemsChanged

({viewableItems: Array<ViewToken>, changed: Array<ViewToken>})=>{}

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

---

• FlatList中的方法：