2018-05-09 react-native 之FlatList列表组件

在认识FlatList之前一直在scrollview组件中遨游,因为scrollview这个组件用起来真的好简单!然而,某一天写需求,要分两列展示信息,scrollview死活写不出来,难道我要用view一左一右各写一个么......这样填数据岂不是要死了~~万能的百度搜出来这么个神奇的组件——FlatList.原谅我这都要百度,因为真的太小白了!

对于FlatList,官网上是这么夸的:

高性能的简单列表组件!支持如下常用功能:

1.完全跨平台;

2.支持水平布局模式;

3.行组件显示或隐藏时可配置回调事件;

4.支持单独的头部组件;

5.支持单独的尾部组件;

6.支持自定义行间分隔线;

7.支持下拉刷新;

8.支持上拉加载;

9.支持跳转到指定行.

如果需要分组/类/区,请使用.(对于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;

                    

下面是具体的实现步骤: 

一.引入相关组件

二.创建数据源

这里注意‘key: 'a'’,我们在设置data的时候,必须要为item设置key值,并且每一个key都是唯一的.原因就在于FlatList的keyExtractor属性.如果不设置的话就必须要制定keyExtractor.为了保险起见,两个都写上!

三.使用

FlatList

子组件

renderItem中return出来的是子组件,自行定义即可.

最终显示的效果: