| 版权声明:本文为博主原创文章,未经博主允许不得转载。
一、简介
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: