vercel-react-native-skills · 改善 React Native 列表和动画

作者提供的示例，实际效果取决于你的输入和使用工具。

输入

订单具有稳定id；列表会插入、删除和重新排序；当前keyExtractor返回index。

输出

编辑示例 · 未运行

<FlatList
  data={orders}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <OrderRow order={item} />}
/>

OrderRow内部状态需在插入、删除和排序后继续对应同一订单。

检查列表、图片、导航、动画及原生模块用法，定位移动端性能问题。

具体任务

改善移动端长列表：检查虚拟化、稳定标识、条目渲染与图片成本。

核查动画及原生依赖：对照React Native与Expo约定检查平台特性。

必需材料

React Native或Expo代码

目标设备与可复现问题

可选材料

性能记录

依赖版本和原生配置

使用门槛

能够运行目标应用，不能用桌面浏览器代替真机表现。

这个 Skill 额外提供的方法

优先排查对滚动与渲染影响大的模式，而非无依据地到处加memo。

编辑示例（未运行）

列表不能用变化的下标做标识

任务：改进一个订单列表的key设置

输入：
订单具有稳定id；列表会插入、删除和重新排序；当前keyExtractor返回index。

结果片段：
```jsx
<FlatList
  data={orders}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <OrderRow order={item} />}
/>
```

OrderRow内部状态需在插入、删除和排序后继续对应同一订单。

以下为官方编辑构造的示例，未运行上游 Skill。片段只修正稳定标识，未声称这一步就能解决所有滚动卡顿。

首次任务

任务：改善移动端长列表。
任务重点：检查虚拟化、稳定标识、条目渲染与图片成本。

必需材料：
- React Native或Expo代码：[填写或粘贴我的材料；未具备则说明]
- 目标设备与可复现问题：[填写或粘贴我的材料；未具备则说明]

可选补充：
- 性能记录：[可填写，未提供不应假定存在]
- 依赖版本和原生配置：[可填写，未提供不应假定存在]

请交付适配现有环境的代码或配置、必要说明及验证办法。仅依据这些材料处理；缺少决定结果的信息时先说明缺口，不补造事实。未执行的检查、修改或外部操作明确标为未执行。

使用前提：能够运行目标应用，不能用桌面浏览器代替真机表现。
处理边界：建议需与实际原生版本兼容；修改代码不等于性能提升，必须测量目标设备

验收要求：
1. 列表条目身份在重排后稳定。
2. 目标真机复测受影响交互。
3. 原生依赖与锁文件一致。

验收方法

列表条目身份在重排后稳定

目标真机复测受影响交互

原生依赖与锁文件一致

依赖与准备

React Native/Expo项目、对应设备或模拟器；按锁定依赖使用构建工具和配套rules。

使用边界

建议需与实际原生版本兼容

修改代码不等于性能提升，必须测量目标设备

排错

加memo仍卡顿：检查图片解码、条目布局和每次渲染的计算。

只在一平台异常：核对原生配置、字体及平台专属API。

固定来源

https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/react-native-skills/SKILL.md

先看看示例

输入

输出

方法说明