Expo Router导航交给AI：Expo Skills的文件式路由、标签页、模态与表单表清单
【免费下载链接】skillsA collection of AI agent skills for working with Expo projects and Expo Application Services项目地址: https://gitcode.com/gh_mirrors/skills9/skills
Expo Skills是 Expo 官方团队推出的 AI 智能体技能集，其中 expo-router 技能 把Expo Router 导航的全部最佳实践打包交给 AI：文件式路由、原生标签页、模态弹窗、表单 Sheet、头部与搜索栏。你只需描述需求，AI 就能按官方规范帮你搭好整个 App 的导航骨架，新手也能一次写对。
🚀 一分钟安装：让 AI 学会 Expo Router
Expo Skills 支持 Claude Code、Codex、Cursor 等主流 AI 编程工具，一条命令装齐全套技能：
npx skills@latest add expo/skills --skill '*'安装后重启 AI 会话即可。之后当你提出与 Expo Router 导航相关的任务时，AI 会自动读取对应技能的 SKILL.md，按照官方约定的路由规范、组件用法来生成代码，而不靠"猜"。
📄 文件式路由：文件名即路由表
expo-router 技能内置了完整的 route-structure.md 参考文档，教给 AI 这些核心约定：
app/目录只放路由：每个文件导出一个页面组件，组件、工具函数一律放别处- 动态路由：
[id].tsx匹配/users/123，[...slug]捕获任意层级 - 分组路由：
(auth)/login.tsx用括号分组，URL 更干净，还能套用独立布局 - 404 页面：一个
+not-found.tsx文件兜底所有未匹配路由 - 首页必备：App 必须始终有匹配
/的路由，避免白屏
典型结构长这样，AI 会严格按此组织文件：
app/ _layout.tsx # 根布局：NativeTabs (index,search)/ _layout.tsx # 每个 Tab 内嵌 Stack index.tsx # 主列表页 search.tsx # 搜索页 i/[id].tsx # 详情页📱 原生标签页：NativeTabs 让 App 长得像系统应用
tabs.md 参考文档是技能中的重点，AI 会优先选用NativeTabs（expo-router/unstable-native-tabs）而非传统 JS Tabs：
| 特性 | 效果 |
|---|---|
| SF Symbols + Material 图标 | 一个Icon组件同时适配 iOS 和 Android |
| 角标与隐藏 | Trigger.Badge显示数字角标，hidden按角色条件隐藏 |
| iOS 26 Liquid Glass | 标签栏自动获得系统液态玻璃外观 |
| 搜索 Tab | role="search"放置末尾，与搜索栏无缝联动 |
| 滚动收缩 | minimizeBehavior="onScrollDown"下滚自动收起 |
技能同时标注了常见坑位：Android 最多 5 个 Tab、Tab 必须静态声明、触发器name要与路由名精确匹配——这些限制都会提前提醒 AI 规避。
🔲 模态与表单 Sheet：一行声明获得系统级弹层
弹窗不需要手写遮罩和动画，expo-router 技能教会 AI 用Stack.Screen的presentation选项一行搞定：
- 模态弹窗：
presentation: "modal"，全屏系统模态 - 表单 Sheet：
presentation: "formSheet"，从底部滑出的卡片，配合sheetAllowedDetents控制停靠高度、sheetGrabberVisible显示拖拽手柄 - 底部内容可交互：
sheetLargestUndimmedDetentIndex让 Sheet 下方的地图等区域保持可操作
完整的配置项与 Footer 定位写法见 form-sheet.md，适合登录、快捷操作、设置面板等场景。
🧭 头部、工具栏与搜索栏
toolbar-and-headers.md 与 search.md 覆盖剩余细节：
Stack.Title一行设置页面大标题，自动适配深浅色Stack.Toolbar在头部右侧和底部工具栏放置系统按钮Stack.SearchBar为页面挂上原生搜索栏，配合useSearch完成过滤
💬 装好之后，这样提问效果最好
README 给出了官方推荐的起手式，可直接复制给 AI：
"Build a native-feeling Expo Router screen with tabs, modals, and animations."
（做一个带标签页、模态和动画的原生感 Expo Router 页面）
AI 会结合路由结构、NativeTabs、FormSheet 等参考文档给出成体系的方案。若发现技能内容有误导或过时之处，每个技能内置了submit-expo-feedback反馈指令，可一键上报给 Expo 团队。
📚 技能文件速查
| 文件 | 内容 |
|---|---|
| SKILL.md | 导航总纲：Link 预览、上下文菜单、Stack、模态与 Sheet |
| references/route-structure.md | 路由约定、动态路由、分组、目录组织 |
| references/tabs.md | NativeTabs 全量 API 与 iOS 26 特性 |
| references/form-sheet.md | 表单 Sheet 配置、Footer 与背景交互 |
| references/search.md | 头部搜索栏与过滤模式 |
| references/zoom-transitions.md | iOS 18+ 的 Apple 缩放转场 |
一句话总结：Expo Router 导航交给 AI，Expo Skills 负责把"怎么写才对"这件事标准化——你提需求，它按官方规范交付。
【免费下载链接】skillsA collection of AI agent skills for working with Expo projects and Expo Application Services项目地址: https://gitcode.com/gh_mirrors/skills9/skills
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
