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 的距离时调用。
这个人暂时没有 freestyle