FlatList的实战用法
1.较为全面的案例：
<FlatList
data={this.state.data}
keyExtractor={(item, index) => index.toString()}
renderItem={this._renderView}
numColumns={3}
style={styles.list}
extraData={this.state}
onRefresh={this.onHeaderRefresh}
refreshing={this.state.isLoading}
onEndReached={this.onFooterRefresh}
onEndReachedThreshold={0.1}
/>
//子布局
_renderView = ({item,index}) => {return <View>'''</View>}
//上拉刷新时调用，加载刷新数据
onHeaderRefresh = () => {
加载数据的代码
};
//下拉加载时调用，加载更多数据，可以用来翻页加载
onFooterRefresh = () => {
调用网络加载数据
};
2.属性介绍
- ItemSeparatorComponent：行与行之间的分割线，可以自定义一个view来作为分割线美化界面，且不会出现在第一行之前、最后一行之后
- ListEmptyComponent：当data属性的数组为空时加载的界面，也是需要自己定义一个view来进行无数据时的界面显示
- ListFooterComponent：尾部组件，当子布局渲染结束之后跟在最后显示的view
- ListHeaderComponent：头部组件
- columnWrapperStyle：如果设置了多列布局（即将numColumns值设为大于1的整数），则可以额外指定此样式作用在每行容器上
- data：子布局加载时需要的数据集合，暂时只支持普通数组，如果需要使用其他特殊数据结构，例如immutable数组，请直接使用更底层的VirtualizedList组件
- extraData：主要为了防止界面不刷新，如果指定为this.state，表示flatlis中用到的state发生变化就会刷新这个布局去显示。
- horizontal：设置为true则变为水平布局模式。
- initialNumToRender：刚开始渲染的子布局的数量。如果指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载，这样是为了保证用户执行返回顶部的操作时，不需要重新渲染首批元素。
- keyExtractor：此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取item.key作为key值。若item.key也不存在，则使用数组下标。
- numColumns：多列布局只能在非水平模式下使用，即必须是horizontal={false}。此时组件内元素会从左到右从上到下按Z字形排列，类似启用了flexWrap的布局。组件内元素必须是等高的——暂时还无法支持瀑布流布局。
- onEndReached：当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
- onEndReachedThreshold：决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。
- onRefresh：如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。
- refreshing：在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号。
- renderItem：根据行数据data渲染每一行的组件。
3.爬坑
修改data数据之后不会自动刷新界面：
如果是这样的：data={this.state.data}设置，最好添加上extraData={this.state}这个属性，这表示只要你的state有改动，就会去刷新整个flatlist。
onEndReached被多次调用的问题：
如果设置了这个属性，且你当前页的数据无法铺满界面，他会自动调起这个方法两到三次，所以尽量在设置这个方法的同时在方法内部添加页码判断
子布局界面搭建问题
子布局的外围尽量不用flext：1这样的设置，如果只有一个元素时会居中，布局时尽量多试多调。
参考资料
https://reactnative.cn/docs/0.50/flatlist.html#content