前言¶
在 Expo 應用裏改導航，常見問題是 Agent 仍按 Web 思維堆 react-navigation 直引、在 app 目錄裏混放組件，或漏掉原生 Stack、Modal、NativeTabs 的配置方式。官方文檔分散在路由結構、Tabs、Header、Form Sheet 等多處，一次對話裏很難全部對齊。
expo-router 是 Expo 團隊在 expo/skills 裏提供的 Framework 類 Skill（MIT，當前資料版本 1.0.1），專門約束 Agent 在 Expo Router 場景下的文件路由、鏈接導航、原生棧與常見呈現方式。它與 expo-overview、expo-project-structure 等同屬官方技能體系；界面樣式與動效分別由 expo-native-ui、expo-animation 等 Skill 覆蓋。
這是什麼¶
expo-router 是一份面向 AI Agent 的 SKILL.md 說明：當任務涉及 Expo Router 的導航與路由時，Agent 按其中規則選用 API、組織 app 目錄，並查閱 bundled 的 references/ 文檔（路由約定、NativeTabs、Toolbar/Header、Form Sheet、搜索欄、Apple Zoom 過渡等）。
Expo 文檔、Expo CLI、EAS CLI 仍是事實來源；Skill 的作用是減少 Agent 誤用舊模式或跨庫直引。
核心功能¶
資料中明確覆蓋的能力包括：
- 文件路由與目錄：路由放在
app目錄；動態路由、分組（groups）、文件夾組織；須保證存在匹配/的路由（可在 group 內）；不在app下 co-locate 組件、類型或工具。 - Link 導航：
expo-router的<Link href="..." />，支持asChild；鼓勵配合<Link.Preview>、長按上下文菜單（Link.Trigger、Link.Menu、Link.MenuAction）。 - 原生 Stack：通過
_layout.tsx定義；從expo-router/stack引入Stack；頁面標題用<Stack.Title>。 - Modal 與 Form Sheet：
Stack.Screen的presentation: "modal"或formSheet，含sheetGrabberVisible、sheetAllowedDetents等；iOS 26+ 透明背景可與 liquid glass 效果相關（資料原文表述）。 - NativeTabs：從
expo-router/unstable-native-tabs使用；資料給出與共享 group 路由、各 Tab 內 Stack 的典型app/結構示例。 - Header 與搜索：偏好
Stack.SearchBar；詳細見references/search.md、toolbar-and-headers.md。 - 庫與風格約定：文件名 kebab-case；移動或重構導航時刪除舊路由文件；
tsconfig.json配置 path alias，優先 alias 而非相對路徑；語義色用expo-router的Color；SDK 56+ 不從@react-navigation/*直引，改用expo-router/react-navigation。
Skill 內還列出可按需打開的參考文件路徑（均在 references/ 下），例如 route-structure.md、tabs.md、form-sheet.md、zoom-transitions.md（Link.AppleZoom，iOS 18+）。
安裝與啓用¶
Expo Skills 對 Cursor 等 Agent 推薦 Skills CLI（Claude Code / Codex 可用官方 Plugin，本文以 CLI 爲主，與 Cursor 場景一致）。
在項目根目錄安裝全部 Expo Skill（含 expo-router）：
npx skills@latest add expo/skills --skill '*'
CLI 會詢問安裝目標；若需指定 Agent，可加 --agent <agent>。安裝後重啓或刷新 Agent 會話，以便發現 SKILL.md。
僅更新本 Skill：
npx skills@latest update expo-router
更寬泛的 Expo 任務可先讓 Agent 加載 expo-overview，再落到 expo-router。
典型用法¶
下列片段均來自 Skill 正文，用於說明 Agent 被引導生成的代碼形態。
基礎鏈接：
import { Link } from 'expo-router';
<Link href="/path" />
<Link href="/path" asChild>
<Pressable>...</Pressable>
</Link>
Modal 呈現：
<Stack.Screen name="modal" options={{ presentation: "modal" }} />
Form Sheet：
<Stack.Screen
name="sheet"
options={{
presentation: "formSheet",
sheetGrabberVisible: true,
sheetAllowedDetents: [0.5, 1.0],
contentStyle: { backgroundColor: "transparent" },
}}
/>
根佈局 NativeTabs + 分組內 Stack（結構示意）：
app/
_layout.tsx — <NativeTabs />
(index,search)/
_layout.tsx — <Stack />
index.tsx
search.tsx
根 _layout.tsx 使用 NativeTabs、ThemeProvider（來自 expo-router/react-navigation）；共享 group 的 _layout.tsx 用 segment 區分當前 Tab 屏幕，併爲動態路由如 i/[id] 單獨配置 Stack.Screen。資料註明 SDK 56+ 使用 headerLargeTitleEnabled，舊版 headerLargeTitle 已在上游棄用。
適用場景與注意¶
適合： 使用 Expo Router 的 React Native / Expo 項目；希望 Agent 搭建 Tab + Stack、Modal/Sheet、帶 Preview 的 Link、Header 搜索等原生導航模式；升級或新功能涉及 SDK 56 導航 API 時。
注意：
app目錄只放路由，業務組件應放在項目約定目錄（常與expo-project-structure一致）。- NativeTabs 路徑爲
expo-router/unstable-native-tabs，API 可能隨 SDK 演進；Tabs 與 iOS 26 相關說明見references/tabs.md。 - 屏幕視覺、顏色體系、動效應切換對應 Skill，避免在本 Skill 外臆造樣式方案。
- 若發現 Skill 內容錯誤或過時，可向 Expo 提交可執行反饋：
npx --yes submit-expo-feedback@latest --category skills --subject "expo-router" "<actionable feedback>"
反覆失敗或需結構化評估時，資料建議加載 expo-skill-feedback Skill，而非僅重複上述命令。
結尾¶
expo-router 把 Expo Router 的文件路由、Link、原生 Stack、Modal/Sheet、NativeTabs 與 Header 搜索等寫成 Agent 可執行的約定，是 Expo 官方移動開發 Agent 化裏與「路由」直接對應的一塊。完整 Skill 與參考文檔見：https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-router；整套 Skills 安裝與說明見 https://github.com/expo/skills。
