前言¶
在 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。
