《ReactNative系列讲义》进阶篇---04.FlatList（一）

| 版权声明：本文为博主原创文章，未经博主允许不得转载。

一、简介

FlatList，平面列表。应用场景一
般是有大量的数据一条一条的罗列出来。这些数据的属性相同，但是内容不一样。那现实中究竟是怎样的一种情景呢，下面我们一起来看看FlatList的基本用法。

二、基础知识

1. FlatList有哪些特性？

• 支持跨平台（同时支持Android和IOS等平台）
• 支持水平布局
• 行组件显示或隐藏时可配置回调事件
• 支持单独的头部文件
• 支持单独的尾部文件
• 支持自定义行间分割线
• 支持下拉刷新
• 支持上拉加载
• 支持跳转到指定行（ScrollToIndex）

2. 支持两种用法？

• 简单用法：继承Component类
• 复杂用法：继承PureComponent类

三、应用

1. 简单用法

• 按照常规调用组件的方式调用

import React, { Component } from 'react';
import { FlatList } from 'react-native';

export default class SampleFlatList extends Component {
   
    render() {
        return(
            <FlatList
                // 页面需要渲染的数据，数组类型
                data={[{name: 'a'}, {name: