前言¶

用 AI 写 React Native 或 Expo 时，模型很容易给出「能跑但费电」的写法：长列表用默认 ScrollView、动画动 layout 属性、导航栈全走 JS 实现。这些问题在真机上会立刻变成掉帧和发热。下面介绍 Vercel 在 agent-skills 仓库里维护的 react-native-skills（包内标识为 vercel-react-native-skills）：把工程团队在移动端性能、动画、原生能力上的约定整理成 Agent Skill，让编码助手在相关任务里自动对照规则，而不是每次从零猜最佳实践。

同仓库里的 react-best-practices 面向 React / Next.js Web 侧；本 Skill 补的是移动端场景，二者可以一起装，分别在不同技术栈任务里触发。

这是什么¶

react-native-skills 是 vercel-labs/agent-skills 中的一个 Skill，遵循 Agent Skills 格式。SKILL.md 中写明：面向 React Native 与 Expo，帮助构建性能更好的移动应用；在编写组件、优化列表、实现动画或接入原生模块时使用。元数据标注作者为 vercel，许可证 MIT，版本 1.0.0。

每条规则以独立 Markdown 文件放在 rules/ 下，并汇总为完整文档 AGENTS.md。规则按影响优先级分成八类，从列表性能（CRITICAL）到字体与导入配置（LOW）。

核心功能¶

何时会用到¶

官方在 SKILL.md 中建议在这些场景引用指南：

• 构建 React Native 或 Expo 应用
• 优化列表与滚动性能
• 使用 Reanimated 实现动画
• 处理图片与媒体
• 配置原生模块或字体
• 在 monorepo 中组织带原生依赖的项目

触发描述（description）还提到：任务涉及 React Native、Expo、移动性能或原生平台 API 时适用。

规则类别与优先级¶

规则内容形态¶

单条规则文件（例如 rules/list-performance-virtualize.md、rules/animation-gpu-properties.md）通常包含：

• 为何重要的简短说明
• 错误示例与解释
• 正确示例与解释
• 补充说明与参考链接

Quick Reference 中列出的部分规则示例如下。

列表性能（CRITICAL）

• list-performance-virtualize：大列表使用 FlashList
• list-performance-item-memo：对列表项组件做 memo
• list-performance-callbacks：稳定回调引用
• list-performance-inline-objects：避免行内 style 对象
• list-performance-function-references：将函数提取到 render 外
• list-performance-images：优化列表中的图片
• list-performance-item-expensive：把昂贵计算移出列表项
• list-performance-item-types：异构列表使用 item types

动画（HIGH）

• animation-gpu-properties：仅对 transform 与 opacity 做动画
• animation-derived-value：用 useDerivedValue 处理派生动画值
• animation-gesture-detector-press：手势优先 Gesture.Tap，而非仅依赖 Pressable

导航（HIGH）

• navigation-native-navigators：优先 native stack 与 native tabs，而非纯 JS 导航器

UI 模式（HIGH）

• ui-expo-image：图片统一用 expo-image
• ui-pressable：交互优先 Pressable 而非 TouchableOpacity
• ui-safe-area-scroll：在 ScrollView 中处理安全区
• 以及原生菜单、原生 Modal、onLayout 测距、StyleSheet / Nativewind 等条目

状态、渲染、Monorepo、配置

• 状态：减少订阅、dispatcher 回调模式、首屏 fallback、与 React Compiler 相关的 shared values 等（react-state-、react-compiler- 前缀）
• 渲染：文本必须包在 Text 内、避免用 falsy && 做条件渲染
• Monorepo：原生依赖放在 app 包、全仓库统一依赖版本
• 配置：字体 config plugin、设计系统导入目录、Intl 对象提升等

需要通读时，可直接打开仓库内的 AGENTS.md（官方称为 Full Compiled Document）。

安装与启用¶

Skill 随整个 agent-skills 包安装，官方命令为：

npx skills add vercel-labs/agent-skills

安装后，Skills 会在检测到相关任务时由 Agent 自动选用；skills.sh 上该包列出多个 Skill，其中移动端条目名为 vercel-react-native-skills（与目录 skills/react-native-skills 对应）。资料未区分 Cursor、Claude Code、Codex CLI 的安装差异，统一使用上述 npx skills add 即可。

若只需阅读规则而不安装 CLI，可直接浏览 GitHub 路径：

https://github.com/vercel-labs/agent-skills/tree/main/skills/react-native-skills

典型用法¶

1、让 Agent 在写 RN 代码时带上规则¶

安装 vercel-labs/agent-skills 后，用自然语言描述移动端任务即可，例如优化列表、加 Reanimated 动画、接原生模块。Agent 应结合 SKILL.md 与对应 rules/*.md 给出建议或改码。

2、人工查阅单条规则¶

在仓库中打开具体规则文件，对照错误/正确示例修改本地代码：

rules/list-performance-virtualize.md
rules/animation-gpu-properties.md

3、与 Web 侧 Skill 分工¶

同一仓库的 react-best-practices（vercel-react-best-practices）覆盖 React / Next.js 的性能与数据获取等类别；本 Skill 覆盖列表虚拟化、Reanimated、expo-image、原生导航栈等移动专属话题。全栈项目可同时安装该包，由任务类型分别命中。

适用场景与注意¶

适合谁

• 日常用 AI 生成或审查 React Native / Expo 代码的团队
• 需要把「FlashList、GPU 友好动画、原生导航」等约定固化进助手行为，而不是口头重复 prompt 的开发者

需要注意

• 规则是工程最佳实践汇编，不能替代你自己在目标设备上的性能与行为验证。
• 仓库内另有名为 react-native-guidelines 的条目（资料中写为 16 条规则、7 个章节），与 react-native-skills 不是同一路径；以 skills/react-native-skills 与本篇引用的 SKILL.md 为准。
• Skill 结构为 SKILL.md、可选 scripts/ 与 references/；本 Skill 的核心资产是 rules/ 与 AGENTS.md。

结尾¶

vercel-react-native-skills 把 Vercel 整理的 React Native / Expo 实践拆成可检索的规则文件，并按列表性能、动画、导航等优先级排序，方便 AI 在移动端任务里稳定引用。若你已在用 npx skills add vercel-labs/agent-skills，无需单独再装一条命令即可与 Web 侧 react-best-practices 并存。

官方目录：github.com/vercel-labs/agent-skills/tree/main/skills/react-native-skills