4.1零基础学RN-Flatlist初见

「这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战」

之前移动端开发的时候用的是ListView，Android中后面开始用RecyclerView，RecyclerView中默认使用ViewHolder+缓存机制的更新，提供高了列表的效率，没想到在RN中也不推荐使用ListView，那么今天来学习一下ListView中的替代产品FlatList。

1.简介

首先开一下官方的说明：

高性能的简单列表组件，支持下面这些常用的功能：

• 完全跨平台。
• 支持水平布局模式。
• 行组件显示或隐藏时可配置回调事件。
• 支持单独的头部组件。
• 支持单独的尾部组件。
• 支持自定义行间分隔线。
• 支持下拉刷新。
• 支持上拉加载。
• 支持跳转到指定行（ScrollToIndex）。
• 支持多列布局。

基本包含了我们想用的所有功能，下拉、上拉刷新、header、footer、分割线、空视图的自定义等等，下面来详细看一下。

2.功能使用

2.1简单的示例

使用FlatList需要实现两个基本的属性：data和renderItem，分别代表：数据和item的样式，简单的例子

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

export default App;

function App() {
  const data = [
    {title: '首页', detail: '这是首页详情'},
    {title: '发现', detail: '这是发现详情'},
    {title: '我的', detail: '这是我的详情'},
    {title: '设置', detail: '这是设置详情'},
  ];
  return (
    <FlatList
      data={data}
      renderItem={({item}) => {
        return (
          <Text style={{padding: 10, backgroundColor: 'orange', margin: 10}}>
            {item.title}
          </Text>
        );
      }}
    />
  );
}
复制代码

2.2 复杂一点的示例

import React, {useState} from 'react';
import {FlatList, Text, View} from 'react-native';

export default App;

function App() {

  const mockData = [
    {title: '首页', detail: '这是首页详情'},
    {title: '发现', detail: '这是发现详情'},
    {title: '我的', detail: '这是我的详情'},
    {title: '设置', detail: '这是设置详情'},
  ];

  const [refreshing, setRefreshing] = useState(false);//下拉刷新
  const [listData, setlistData] = useState([]);//列表数据

  //item渲染
  const _renderItem = ({item}) => {
    return (
      <Text style={{padding: 10, backgroundColor: 'orange', margin: 10}}>
        {item.title}
      </Text>
    );
  };

  //空视图
  const _renderEmpty = () => {
    return (
      <View>
        <Text>This is an Empty View</Text>
      </View>
    );
  };

  //加载数据
  const _loadData = () => {
    setlistData([...listData, ...mockData]);
    setRefreshing(false);
  };

  //瀑布流加载更多
  const _onReachEnd = () => {
    console.log('onReachEnd');
  };

  return (
    <FlatList
      data={listData}
      ListEmptyComponent={_renderEmpty}
      refreshing={refreshing}
      onRefresh={_loadData}
      onEndReachedThreshold={0.05}
      onEndReached={_onReachEnd}
      numColumns={2}
      columnWrapperStyle={{padding: 5, borderWidth: 3, borderColor: 'red'}}
      renderItem={_renderItem}
    />
  );
}
复制代码

用了很多次FlatList，但是也是基本使用很多比较详细的内容还是没有使用到，也不是很了解，暂时介绍一部分数据和方法，给自己埋一个坑，以后再来填坑吧。。。。。

3.属性介绍

FlatList控件基于组件封装，继承了其所有props，并包含所有的的属性。

3.1 renderItem（必需）

用于绘制列表中的一项，

• item：data中需要渲染的项的内容
• index：当前项位于data中的位置

3.2 data（必需）

数据源，也就是上面例子中的data，目前只支持普通数组。

3.3 ItemSeparatorComponent

行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后

3.4 ListEmptyComponent

列表内容为空时显示的控件，可以直接返回一个渲染好的控件

const _renderEmpty = () => {
  return (
    <View>
      <Text>This is an Empty View</Text>
    </View>
  );
};
复制代码

3.5 ListFooterComponent

底部组件，可以直接返回一个渲染好的控件，跟空视图类似，就不单独写了

3.6 ListHeaderComponent

头部组件，可以直接返回一个渲染好的控件，跟空视图类似，就不单独写了

3.7 columnWrapperStyle

多列模式时（即numColums大于1），可以指定每行的样式

<FlatList
  data={data}
  ListEmptyComponent={_renderEmpty}
  numColumns={2}
  columnWrapperStyle={{padding: 5, borderWidth: 3, borderColor: 'red'}}
  renderItem={({item, index, separators}) => {
    return (
      <Text style={{padding: 10, backgroundColor: 'orange', margin: 10}}>
        {item.title}
      </Text>
    );
  }}
  />
复制代码

3.8 extraData

如果有除data以外的数据用在列表中（不论是用在renderItem还是头部或者尾部组件中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的 Object 或者数组中），然后再修改其值，否则界面很可能不会刷新。

3.9 getItemLayout

如果行高是固定的，可以使用此方法来避免动态计算高度的开销。

getItemLayout={(data, index) => (
  {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
)}
复制代码

3.10 horizontal

设置为true时，会变为水平布局

3.11 initialNumToRender

指定一开始渲染的元素数量，可以指定只渲染一页的数据，保证加载速度和用户可见内容

3.12 initialScrollIndex

开始时屏幕顶端的元素是列表中的第 initialScrollIndex个元素, 而不是第一个元素

3.13 inverted

翻转滚动方向（boolean）。实质是将 scale 变换设置为-1。

3.14 keyExtractor

此函数用于为给定的 item 生成一个不重复的 key。

3.15 numColumns

多列布局，只能在非水平模式下使用，即必须是horizontal={false}。控件内元素会从左到右从上到下排列。

组件内元素必须是等高的——暂时还无法支持瀑布流布局。

3.16 onEndReached

当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。

结合onEndReachedThreshold实现瀑布流。

3.17 onEndReachedThreshold

决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。

比如，0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发。

一般用于列表瀑布流更新，当底部不足某个值时，触发加载新数据的操作。

3.18 onRefresh

如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。

3.19 refreshing

在等待加载新数据时将此属性设为 true，列表就会显示出一个正在加载的符号。

4.方法介绍

4.1scrollToEnd()

滚动到底部。

4.2scrollToIndex()

将位于指定位置的元素滚动到可视区的指定位置，当viewPosition 为 0 时将它滚动到屏幕顶部，为 1 时将它滚动到屏幕底部，为 0.5 时将它滚动到屏幕中央。

4.3scrollToItem()

滚动至指定的Item，但是会变量列表，效率有影响

4.4scrollToOffset()

滚动到一定的位置

4.5recordInteraction()

主动通知列表发生了一个事件，以便列表重新绘制

4.6flashScrollIndicators()

短暂地显示滚动指示器。