关于 react-navigation
面向 React Navigation 7 的导航 UI 构建指南，适用于开发者配置应用导航结构与界面。它涵盖静态和动态 API，并按导航模式提供对应参考文档。
主要功能
- 01Static 与 Dynamic API 选择指南
- 02堆栈与表单页导航
- 03底部及顶部标签导航
- 04抽屉与侧边栏配置
- 05标题栏和安全区域处理
适用场景
- 01为新应用选择导航 API
- 02为应用添加堆栈、标签或抽屉导航
- 03配置导航标题栏与安全区域
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/react-navigation确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
agents/openai.yamlreferences/bottom-tabs.mddrawers.mdform-sheet.mdheader.mdmaterial-top-tabs.mdnative-bottom-tabs.mdsafe-areas.mdstacks.md详细介绍
React Navigation
概述
React Navigation 导航 UI 构建指南。
此技能仅适用于 React Navigation 7。API 和模式可能无法用于其他版本。
API 选择
React Navigation 提供两种 API——基于对象的 Static API 和基于组件的 Dynamic API。
- 现有应用：检查当前的导航设置，并在使用参考资料时遵循相同的 API 风格
- 新应用：如果应用尚未设置导航，优先使用
Static API
适用场景
在以下情况下可参考此技能：
- 构建导航 UI 模式，例如堆栈、标签页、抽屉、表单页等
- 配置标头和其他内置导航器 UI
- 处理导航 UI 中的安全区域和内边距
参考资料
| 文件 | 描述 |
|---|---|
| stacks.md | 基于堆栈的导航 |
| form-sheet.md | 底部工作表和表单工作表 |
| bottom-tabs.md | 跨平台底部标签页 |
| native-bottom-tabs.md | 原生底部标签页 |
| material-top-tabs.md | 可滑动顶部标签页 |
| drawers.md | 抽屉导航和侧边栏 |
| header.md | 配置标头 |
| safe-areas.md | 安全区域处理 |
问题 -> 技能映射
| 问题 | 从这里开始 |
|---|---|
| 在堆栈中显示屏幕和模态框 | stacks.md |
| 显示底部工作表或表单工作表 | form-sheet.md |
| 在底部标签页或支持 Web 的自适应侧边栏中显示屏幕 | bottom-tabs.md |
| 在 iOS 和 Android 的原生标签页中显示屏幕 | native-bottom-tabs.md |
| 在可滑动的顶部标签页中显示内容 | material-top-tabs.md |
| 使用抽屉或侧边栏 | drawers.md |
| 配置底部标签页或抽屉导航器中的标头 | header.md |
| 处理安全区域，例如状态栏、标头内边距、标签栏内边距等 | safe-areas.md |
评论
支持 Markdown