在认识FlatList之前一直在scrollview组件中遨游,因为scrollview这个组件用起来真的好简单!然而,某一天写需求,要分两列展示信息,scrollview死活写不出来,难道我要用view一左一右各写一个么......这样填数据岂不是要死了~~万能的百度搜出来这么个神奇的组件——FlatList.原谅我这都要百度,因为真的太小白了!
对于FlatList,官网上是这么夸的:
高性能的简单列表组件!支持如下常用功能:
1.完全跨平台;
2.支持水平布局模式;
3.行组件显示或隐藏时可配置回调事件;
4.支持单独的头部组件;
5.支持单独的尾部组件;
6.支持自定义行间分隔线;
7.支持下拉刷新;
8.支持上拉加载;
9.支持跳转到指定行.
如果需要分组/类/区,请使用<SectionList>.(对于SectionList后面单独记录).
下面详细说名我自己使用过程中遇到的问题
属性
介绍几个比较重要的属性:
data: 列表的数据源,js中就是一个array数组;
numColumns: 显示的列数;
renderItem: 从数据源中逐个解析数据,然后返回一个设定好格式的组件来渲染;
keyExtractor: 用于为给定的item生成一个不重复的key。若不指定此函数，则默认抽取item.key作为key值。若item.key也不存在，则使用数组下标index。
⚠️注意: data接收的数组,需要写成{key:'value'}的形式;
renderItem绑定数据的格式为:renderItem={({item}) => 你的子item的组件}，获取数据调用item.key的形式.
keyExtractor一般的使用方式:
_keyExtractor=(item, index)=> index;
<FlatList keyExtractor={this._keyExtractor} />
下面是具体的实现步骤:
一.引入相关组件
二.创建数据源
这里注意‘key: 'a'’,我们在设置data的时候,必须要为item设置key值,并且每一个key都是唯一的.原因就在于FlatList的keyExtractor属性.如果不设置的话就必须要制定keyExtractor.为了保险起见,两个都写上!
三.使用
renderItem中return出来的是子组件,自行定义即可.
最终显示的效果:
