开发与工程

React Navigation 导航构建指南

为 React Native 应用提供 React Navigation 7 导航界面的选型与实现参考。

57/ 100
谨慎使用

价值存在,但可靠性、证据或控制措施仍有明显缺口。

查看评分依据 ↓
可直接使用于
Codex · Claude Code
Star 数
★ 1.7k
最近更新
18 天前
License
MIT
react-navigationreact-nativenavigation-uinative-stack
+3bottom-tabsdrawerssafe-area

这个 Skill 能做什么,适合哪些场景?

该技能面向使用 React Navigation 7 构建 React Native 导航界面的开发者。它覆盖堆栈、底部标签、原生底部标签、顶部标签、抽屉和表单页等模式,也涉及标题栏及安全区域处理。对于已有导航项目,它建议沿用现有的静态或动态 API;新项目则优先考虑静态 API。技能通过多个主题参考文件,将具体问题映射到相应的实现指南。

它检查现有项目采用的导航 API 风格,并据此选择静态 API 或动态 API 的参考方式;针对堆栈、标签、抽屉、表单页、标题栏和安全区域等问题,定位到对应的 Markdown 参考文件;输出面向 React Navigation 7 的导航 UI 实现指导。

适合
  • React Native 开发者需要组织页面和模态界面时,参考堆栈导航模式。
  • 开发者需要实现底部标签、响应式侧边栏或原生 iOS/Android 标签时,选择相应的标签导航指南。
  • 开发者需要加入底部表单页或其他表单页界面时,参考 form-sheet 指南。
  • 开发者需要配置底部标签或抽屉导航器的标题栏时,使用标题栏参考。
  • 开发者需要处理状态栏、标题栏内边距或标签栏内边距时,使用安全区域指南。

如何安装这个 Skill?

使用前请注意
  • 仅适用于 React Navigation 7;项目若使用其他版本,示例和 API 可能失效。
  • 抽屉、Material top tabs、native bottom tabs、form sheets 等功能依赖额外原生包、平台版本或构建配置,安装与兼容性仍需在目标项目中核验。
  • 文档包含部分 unstable API 和面向未来平台版本的功能,升级 React Native、Expo 或 React Navigation 前应重新核对官方文档。
  • 本评估未执行示例、测试或构建,也未验证引用文档在中国大陆网络中的可达性。
开始前你需要
Agent 需要具备
  • 本地文件系统
需要预先安装
  • React Navigation 7

该仓库提供的是包含多个技能的集合。源码 README 记录的 Codex 项目级安装方式是:git clone https://github.com/callstackincubator/agent-skills.git;cp -r agent-skills/skills/* .codex/skills/。用户级安装可将目标目录复制到 ~/.codex/skills/。README 未提供只安装 skills/react-navigation/ 的独立命令。

通用方式:手动安装到 Claude Code(macOS / Linux)
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/callstackincubator/agent-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/react-navigation" ~/.claude/skills/
rm -rf "$tmp"

根据源仓库地址和 Skill 路径自动生成,只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式,请优先按作者说明操作;想只在当前项目中使用,把 ~/.claude/skills 换成项目里的 .claude/skills。

如何使用这个 Skill?

将 react-navigation 技能目录放入 Codex 可识别的 skills 目录后,重启 Codex;随后在涉及 React Navigation 7 的任务中使用技能,例如:请根据现有项目的导航 API 风格,实现一个带安全区域处理的底部标签导航界面。

这个 Skill 有哪些优点和局限?

优点
  • 覆盖堆栈、多个标签导航、抽屉、表单页、标题栏和安全区域等常见导航 UI 场景。
  • 提供问题到参考文件的明确映射,便于按需查阅。
  • 同时说明静态 API 与动态 API 的选型原则。
  • 采用 MIT 许可证。
局限
  • 明确只适用于 React Navigation 7,其他版本的 API 和模式可能不适用。
  • 源码仅展示 SKILL.md,未提供参考文件内容、测试结果或平台验证证据。
  • 安装说明针对整个技能集合,单独安装该技能的步骤未被文档化。
  • 内容聚焦导航 UI,不涵盖更广泛的 React Native 性能、升级或测试工作流。

这个 Skill 与同类方案有什么区别?

与相关 Skills 并排比较;分数均按同一 FSRS 标准得出。

Skill FS 评分 Star 数 最近更新 License
React Navigation 导航构建指南 本页 57 · 谨慎使用 ★ 1.7k 18 天前 MIT
Stitch React Native 构建器 38 · 不推荐 ★ 8.5k 2 个月前 Apache-2.0
Expo Router 导航助手 53 · 谨慎使用 ★ 2.9k 21 天前 MIT
Expo 原生 UI 构建助手 59 · 推荐 ★ 2.9k 21 天前 MIT
React Native TV 应用审查指南 54 · 谨慎使用 ★ 1.7k 18 天前 MIT

FollowSkills 如何评估这个 Skill?

FollowSkills 评估 · FSRS-2.0
谨慎使用
57/ 100 五分制 2.9 / 5
上游仓库在本次评估后已有新提交;当前评分仍对应所示审查版本,可能尚未覆盖最新改动。
1信任安全18 / 25 · 3.6/5

内容限于 React Navigation 配置与 UI 模式,没有凭据、数据访问、外部副作用或破坏性操作,符合低权限范围;但未提供用户确认、回滚或敏感数据处理说明,且作者身份未被验证,因此扣分。

2可靠稳定8 / 20 · 2.0/5

文档明确限定 React Navigation 7,覆盖 API 选择、平台前置依赖和多项 Android/iOS/web 限制,降低误用风险;但没有测试、CI、版本兼容矩阵或可诊断的失败反馈,静态证据不足,故扣分。

3适用触发11 / 15 · 3.7/5

目标用户、适用场景和不适用范围较清楚,涵盖 stacks、tabs、drawers、sheets、headers 与 safe areas,并说明平台限制;但没有中文使用说明,触发条件仍较宽泛,且未评估中国大陆网络下外部文档可达性,故扣分。

4规范维护9 / 15 · 3.0/5

采用主文件路由到分主题 reference 的渐进式结构,包含 MIT 许可证、依赖前置条件、示例、相关主题和限制说明;但缺少独立的维护责任、更新路径、变更记录和明确版本治理,故扣分。

5有效结果7 / 15 · 2.3/5

提供大量 Static API 与 Dynamic API 示例,能够直接指导常见 React Navigation 7 导航 UI 实现;但示例未在文件中提供执行验证,覆盖完整应用集成、错误处理和项目依赖协调有限,按静态上限给分。

6证据核验4 / 10 · 2.0/5

引用了 React Navigation 和 React Native 的规范文档,并提供可审计的代码示例与平台条件;但没有提交测试、CI 执行结果或第三方复现证据,静态可验证性有限,故扣分。

1 2 3 4 5 6

点击维度查看打分理由

评估于 2026年7月20日 审查版本 f6b87e35a35c 评估证据[1][2][3][4][5][6][7][8][9][10]

证据充分度:低 — 主要依赖静态检查、作者材料或有限演示;适合发现线索,不适合做高风险决策。

查看完整评分方法 →

常见问题

这个技能适合哪些项目?
适合使用 React Navigation 7 构建 React Native 导航 UI 的项目,尤其是需要堆栈、标签、抽屉、表单页、标题栏或安全区域处理的项目。
新项目应该使用哪种 API?
如果项目尚未建立导航结构,技能建议优先使用静态 API;已有项目应先检查并沿用现有的静态或动态 API 风格。
使用它需要额外的服务或网络权限吗?
源材料没有显示该技能需要 MCP、网络服务或特定外部工具;它主要由 SKILL.md 及其本地参考文件组成。

同仓库的其他 Skills

均来自 callstackincubator/agent-skills

开发与工程

React Native TV 应用审查指南

帮助开发者系统排查电视端焦点导航、播放、性能与无障碍问题。

★ 1.7k FS 54 谨慎使用 18 天前
开发与工程

React Native 性能与工程实践指南

为 React Native 和 Expo 应用提供可直接参考的性能与平台优化规则。

★ 1.7k FS 51 谨慎使用 18 天前
开发与工程

React Native 性能优化指南

用可测量的方法定位并优化 React Native 性能问题。

★ 1.7k FS 60 推荐 18 天前
开发与工程

React Native 升级助手

通过模板差异、依赖迁移和原生配置调整,帮助 React Native 应用安全升级。

★ 1.7k FS 58 推荐 18 天前
开发与工程

React Native 迁移评估

用证据判断 React Native 迁移是否值得推进

★ 1.7k FS 57 谨慎使用 18 天前
开发与工程

React Native 棕地迁移助手

帮助原生 iOS 或 Android 应用分阶段接入 React Native 或 Expo。

★ 1.7k FS 53 谨慎使用 18 天前
开发与工程

React Native 库搭建助手

用标准脚手架创建可发布或应用内使用的 React Native 库。

★ 1.7k FS 50 谨慎使用 18 天前
自动化与运维

React Native GitHub Actions 构建产物

在云端构建 React Native 模拟器产物,并通过 GitHub 工具下载。

★ 1.7k FS 49 谨慎使用 18 天前
开发与工程

移动应用 Dogfood 测试技能

用真实设备系统探索移动应用,并生成带截图和复现步骤的缺陷报告。

★ 1.7k FS 46 谨慎使用 18 天前
开发与工程

React Native 测试助手

帮助 AI 编写可靠的 React Native 组件测试

★ 1.7k FS 54 谨慎使用 18 天前
开发与工程

跨平台设备交互助手

让 AI 编程助手能够检查并操作 Apple 与 Android 应用设备。

★ 1.7k FS 58 推荐 18 天前
开发与工程

技能规范校验器

检查 Agent Skill 是否符合规范与 Claude Code 最佳实践。

★ 1.7k FS 45 不推荐 18 天前
开发与工程

GitHub PR 工作流助手

用 gh CLI 管理 PR、堆叠分支与代码合并流程。

★ 1.7k FS 42 不推荐 18 天前

相关 Skills