React Native 快速列表：无需尺寸适配方案或原生模块

如果你曾在 React Native 中构建过复杂界面，你可能对列表组件吐槽过。标准的 FlatList 在长列表上开始掉帧并塞满内存。Shopify 的 FlashList 由于组件复用明显更快，但当传入高度不可预测的元素（如文本和图片量不同的帖子）时，在列表通过 2 猜测单元格大小时，快速滚动时会出现卡顿或布局抖动。

最近，LegendApp 团队发布了 Legend List 库。这是一个完全用 TypeScript 编写的列表组件，没有一行原生代码，恰好解决了这个动态尺寸的难题。

核心理念

该项目的主要目标是提供一个具有熟悉 API 的 FlatList 和 FlashList 替代品，但不会在可变高度元素上出现性能下降。开发者有意只使用纯 JavaScript 和 TypeScript。无需链接原生模块。这简化了 Expo Go 和 Web 版本的构建，也降低了更新 React Native 版本时出现问题的风险。

该项目轻量且可作为直接替代品。如果你已经用 FlatList 编写了一个界面，基本的迁移只需要更改导入和组件名称。

这个库能做什么

开发者专注于移动应用中列表的典型问题。以下四个方面明显更加便捷：

1. 开箱即用的动态高度。无需预先计算精确的卡片尺寸或传入近似估算值。列表会自动适应内容大小，不会出现渲染延迟。

2. 正确的聊天界面。创建消息界面的经典技巧是通过 3 翻转列表。这会导致键盘动画、反转滚动和定位方面的奇怪 bug。Legend List 有一个 4 属性，可以在不反转的情况下将内容对齐到底部边缘，以及一个 5 属性可以在新数据到达时保持滚动在最后一条消息处。

3. 双向无限滚动。向上和向下加载数据时不会出现白屏闪烁和视口位置的突然跳跃。

4. 受控的单元格回收。通过 6 属性，你可以启用或禁用组件复用。如果列表元素内部存储了复杂的本地 7，复用有时会导致显示他人状态的副作用。在 Legend List 中，出于安全考虑，回收默认是禁用的，但你可以用一行代码启用它以获得最大速度。

代码示例

安装方式为标准流程：

我们从 runtime 子文件夹导入组件并传入熟悉的属性：

8 属性可以在可见区域上方的元素大小发生变化或新数据到达时保持内容在屏幕上。

局限性和未来计划

这个仓库还很年轻，出现于 2024 年底。在路线图中，作者公开说明了目前还没有的功能：

• 瀑布流网格（不同高度的瓦片）
• 粘性标题
• 列跨度
• 单独的项目类型（9）

如果你的界面依赖带有粘性部分的复杂网格，现在迁移还为时过早。

谁应该尝试

这个库对于那些厌倦了在聊天、新闻源或评论列表中与界面跳动搏斗的人很有用。如果 FlashList 在你的动态卡片上抖动，而 FlatList 无法提供你需要的流畅度，在测试分支中安装 10。由于不需要更改组件结构或编写原生包装器，检查它只需要几分钟。