前言¶

用 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