flatList组件使用心得

flatList 是一个高性能的简单列表组件。

支持一些常用的功能,比如:

支持下拉刷新,

支持上拉加载,

支持水平,垂直列表渲染,

支持单独的头部组件

支持单独的尾巴组件,

支持自定义行间分离,

下面是最简单的用法:

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

data是数据源,renderItem是一个函数,在这个函数里有一个item参数,item代表数组中的每一个对象。这个函数的返回值就是你要渲染的内容。

其他一些属性:

keyExtractor={(item,index)=>item.index},

此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体,以便在刷新时能够确定其变化的位置,减少重新渲染提高性能。

ListFooterComponent={}

尾部组件。可以放一些加载提示的信息比如,请求数据时提示正在加载的字样。

ListHeaderComponent={}

头部组件。跟头部组件类似。

horizontal={true}

可以调整渲染列表的方向,如果值为true,则变为水平列表渲染。默认是false垂直列表渲染。

initialNumToRender={ number }

指定一开始渲染的元素数量,最好刚刚够填满一个屏幕,这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载,这样是为了保证用户执行返回顶部的操作时,不需要重新渲染首批元素。

onEndReachedThreshold={ 0.5 }

决定当距离内容最底部还有多远时触发 onEndReached 回调。注意此参数是一个比值而非像素单位。比如,0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发

onEndReached={ this.fn }

当列表被滚动到距离内容最底部不足 onEndReachedThreshold  的距离时调用。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容