zl程序教程

您现在的位置是:首页 >  工具

当前栏目

React Native组件之FlatList

组件React native
2023-09-27 14:22:50 时间

在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代,可以看到,特别是0.50之后,React Native的组件库在不断地壮大,React Native也正在越来越稳定。

随着版本的升级,React Native引进了一些新的组件中,如FlatList、SectionList等具有更高性能的列表组件,也有与时俱进的用于适配全屏幕的SafeAreaView组件,同时一些性能比较差、无法适应React Native发展的一些老的组件也逐渐被抛弃,如:ListView、Navigator等组件。

下面是一张说明图,来自于网络:
这里写图片描述

FlatList简介

总所周知,为了实现列表的效果,React Native提供了ListView组件,并且通过对ListView进行简单的封装,ListView还可以实现下拉刷新和上拉加载的功能。
但是如果对ListView比较了解的同学都会发现,ListView的性能是非常差的,所以React Native在0.43版本推出了FlatList,FlatList自带上拉下拉的功能,用于替换ListView。

FlatList功能简介

FlatList支持如下功能:

  • 完全跨平台;
  • 支持水平布局模式;
  • 行组件显示或隐藏时可配置回调事件;
  • 支持单独的头部组件;
  • 支持单独的尾部组件;
  • 支持自定义行