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