Legend List 开源项目教程

骆万湛Rebecca

于 2025-04-08 10:59:17 发布

阅读量606

点赞数 25

本文链接：https://blog.csdn.net/gitblog_01024/article/details/147062961

版权

Legend List 开源项目教程

legend-list 项目地址: https://gitcode.com/gh_mirrors/le/legend-list

1. 项目介绍

Legend List 是一个为 React Native 设计的高性能列表组件，完全使用 JavaScript/TypeScript 编写（无需原生依赖）。它的目标是作为 FlatList 和/或 FlashList 的即插即用替代品，特别是在处理动态大小的项时提供更好的性能。

该项目目前处于早期发布阶段，用于测试和收集反馈。它尚未在生产环境中使用，并且需要进一步完善以达到与 FlatList（和 FlashList）功能的对等。

特性

性能优化：从底层设计出发，追求速度，旨在在常见场景中超越 FlatList。
动态项目大小：原生支持具有不同高度的项目，无需性能损失。
即插即用：旨在与 FlatList API 兼容，便于迁移。
纯 JS/TS：无需原生模块链接，确保更容易的集成和跨平台兼容性。
轻量级：目标是保持 LegendList 作为一个尽可能小的依赖项。

2. 项目快速启动

以下是如何快速启动 Legend List 项目的步骤。

首先，你需要安装 Legend List 包。你可以使用 Bun、npm 或 Yarn 来安装：

# 使用 Bun
bun add @legendapp/list

# 使用 npm
npm install @legendapp/list

# 使用 Yarn
yarn add @legendapp/list

然后，你可以创建一个简单的组件来使用 Legend List：

import React, { useRef } from 'react';
import { View, Image, Text, StyleSheet } from 'react-native';
import { LegendList, LegendListRef } from '@legendapp/list';

// 假设你有一个 userData 对象
interface UserData {
  id: string;
  name: string;
  photoUri: string;
}

const LegendListExample = () => {
  const listRef = useRef<LegendListRef | null>(null);

  const renderItem = ({ item }: LegendListRenderItemProps<UserData>) => (
    <View style={styles.itemContainer}>
      <Image style={styles.profilePic} source={{ uri: item.photoUri }} />
      <Text style={styles.name}>{item.name}</Text>
    </View>
  );

  return (
    <LegendList<UserData>
      data={data}
      renderItem={renderItem}
      estimatedItemSize={70}
      keyExtractor={(item) => item.id}
      ref={listRef}
      recycleItems={true}
      maintainScrollAtEnd={false}
      maintainScrollAtEndThreshold={1}
    />
  );
};

export default LegendListExample;

const styles = StyleSheet.create({
  itemContainer: {
    // 样式定义
  },
  profilePic: {
    // 样式定义
  },
  name: {
    // 样式定义
  },
});

确保你已经定义了 data 对象，它应该包含你想要显示的数据。