Shopify FlashList 中的 SectionList 功能实现指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01043/article/details/148487433

Shopify FlashList 中的 SectionList 功能实现指南

flash-list A better list for React Native 项目地址: https://gitcode.com/gh_mirrors/fl/flash-list

前言

在移动应用开发中，列表展示是最常见的UI组件之一。React Native 提供了 SectionList 组件来处理带有分组标题的列表数据，而 Shopify 的 FlashList 作为高性能列表组件，虽然不直接提供 SectionList 的专用API，但我们可以通过巧妙的数据处理和属性配置来实现相同的功能。

SectionList 与 FlashList 的核心差异

React Native 的 SectionList 是一个基于 FlatList 构建的便利组件，专门用于处理分组数据。它提供了一些特有属性：

sections：定义分组数据
renderSectionHeader：渲染分组标题
renderSectionFooter：渲染分组底部
SectionSeparatorComponent：分组分隔组件
stickySectionHeadersEnabled：粘性标题功能

FlashList 作为高性能列表组件，虽然没有这些专用属性，但通过合理的数据结构设计和现有属性的组合，完全可以实现相同的功能，甚至在某些情况下代码会更加简洁。

实战：联系人列表迁移示例

原始 SectionList 实现

假设我们有一个联系人列表，按姓氏首字母分组：

interface Contact {
  firstName: string;
  lastName: string;
}

interface Section {
  title: string;
  data: Contact[];
}

const contacts: Section[] = [
  { title: "A", data: [{ firstName: "John", lastName: "Aaron" }] },
  {
    title: "D",
    data: [
      { firstName: "John", lastName: "Doe" },
      { firstName: "Mary", lastName: "Dianne" },
    ],
  },
];

迁移到 FlashList 的数据转换

要将上述结构转换为 FlashList 可用的格式，我们需要将分组标题和条目合并到一个扁平数组中：

const contacts: (string | Contact)[] = [
  "A",  // 分组标题
  { firstName: "John", lastName: "Aaron" },  // 条目
  "D",  // 分组标题
  { firstName: "John", lastName: "Doe" },  // 条目
  { firstName: "Mary", lastName: "Dianne" },  // 条目
];

渲染逻辑实现

在 FlashList 中，我们需要在 renderItem 中区分处理标题和普通条目：

renderItem={({ item }) => {
  if (typeof item === "string") {
    // 渲染分组标题
    return <Text style={styles.header}>{item}</Text>;
  } else {
    // 渲染联系人条目
    return <Text>{item.firstName}</Text>;
  }
}}

性能优化技巧

为了提高渲染性能，我们可以使用 getItemType 属性帮助 FlashList 更好地复用组件：

getItemType={(item) => {
  return typeof item === "string" ? "sectionHeader" : "row";
}}

实现粘性标题

SectionList 的 stickySectionHeadersEnabled 属性在 FlashList 中可以通过 stickyHeaderIndices 实现：

const stickyHeaderIndices = contacts
  .map((item, index) => (typeof item === "string" ? index : null))
  .filter((item) => item !== null) as number[];

// 然后在 FlashList 中使用
stickyHeaderIndices={stickyHeaderIndices}

完整实现代码

import React from "react";
import { StyleSheet, Text } from "react-native";
import { FlashList } from "@shopify/flash-list";

interface Contact {
  firstName: string;
  lastName: string;
}

const contacts: (string | Contact)[] = [
  "A",
  { firstName: "John", lastName: "Aaron" },
  "D",
  { firstName: "John", lastName: "Doe" },
  { firstName: "Mary", lastName: "Dianne" },
];

const stickyHeaderIndices = contacts
  .map((item, index) => (typeof item === "string" ? index : null))
  .filter((item) => item !== null) as number[];

const ContactsFlashList = () => {
  return (
    <FlashList
      data={contacts}
      renderItem={({ item }) => {
        if (typeof item === "string") {
          return <Text style={styles.header}>{item}</Text>;
        } else {
          return <Text>{item.firstName}</Text>;
        }
      }}
      stickyHeaderIndices={stickyHeaderIndices}
      getItemType={(item) => {
        return typeof item === "string" ? "sectionHeader" : "row";
      }}
      estimatedItemSize={100}
    />
  );
};

const styles = StyleSheet.create({
  header: {
    fontSize: 32,
    backgroundColor: "#fff",
  },
});