技能库智客分类：Agent 工作流 react-navigation

反应导航

为堆栈,标签,抽屉等提供回放导航UI模式. 在构建带有React Navigation,配置信头,底页或处理安全区和设置的导航 UI时使用.

3040 安装量

官方网址：skills.sh

技能介绍

先看中文介绍；官方 description 原文单独保留，不改写 SKILL.md。

做什么

提供反应导航堆栈、标签、抽屉等的用户界面图案

何时用

建筑导航 UI 有反应导航、配置信头、底页或处理安全区和设置

代理如何加载

按 Agent Skills 渐进披露：启动时只加载 name 与 description（约 100 token）；任务匹配后才读入整份 SKILL.md 正文；scripts/、references/、assets/ 仅在需要时再读。本文件正文结构：React Navigation、Overview、API Selection、When to Apply、References、Problem -> Skill Mapping。

文件分析

文件分析：除 SKILL.md 外，正文引用了 references/stacks.md、references/form-sheet.md、references/safe-areas.md、references/bottom-tabs.md、references/native-bottom-tabs.md、references/material-top-tabs.md，属于带资源的技能包，这些文件按需再读。

官方 description（原文）

Provides React Navigation UI patterns for stacks, tabs, drawers etc. Use when building navigation UIs with React Navigation, configuring headers, bottom sheets or handling safe areas and insets.

React NavigationOverviewAPI SelectionWhen to ApplyReferencesProblem -> Skill Mapping

· 许可：MIT

来源分类：skills.sh agent-skill

来源与网址

市场来源：skills.sh

GitHub 完整包

开源榜 Skill 分类

SKILL.md 与 Agent 调用

官方规范 ↗

name: react-navigation
description: Provides React Navigation UI patterns for stacks, tabs, drawers etc. Use when building navigation UIs with React Navigation, configuring headers, bottom sheets or handling safe areas and insets.
许可: MIT

发现技能客户端向 Agent 提供名称与描述目录。
匹配与调用用户指定或任务匹配后，载入 SKILL.md 指令。
按需加载按步骤读取参考文档、使用脚本与素材。

指令中引用的文件 · 8

references/stacks.md
references/form-sheet.md
references/safe-areas.md
references/bottom-tabs.md
references/native-bottom-tabs.md
references/material-top-tabs.md
references/drawers.md
references/header.md

以下路径提取自原文；文件是否齐全请以来源仓库中的完整目录为准。

具体调用语法与可用工具以目标 Agent 客户端为准。查看调用机制说明 ↗

安装这个技能

Skills CLI ↗

先选择目标 Agent 和安装范围，保留技能包的附属文件，安装后检查客户端能否发现该技能。

该技能引用了附属文件，请从来源获取完整目录；仅复制 SKILL.md 可能缺少依赖。

交给 Agent 安装

复制安装指令给支持 Agent Skills 的代理，确认其中的目标目录与客户端匹配。

把 Agent Skill「react-navigation」安装到我的项目：SKILL.md 原文与官方 description 见 https://zicq.com/zh/skills/skl-f5d9e7eea3415e24-%E5%8F%8D%E5%BA%94%E5%AF%BC%E8%88%AA.html
请存为 .cursor/skills/react-navigation/SKILL.md 或 .claude/skills/react-navigation/SKILL.md，frontmatter 的 name 与 description 保持原样，不要改写。
该技能还带 scripts/、references/、assets/ 等文件，请从 https://github.com/callstackincubator/agent-skills 取完整目录，不要只建一个 SKILL.md。

GitHub 完整包 ↗

终端安装 · Skills CLI

需要 Node.js 与 npx。先查看仓库技能列表，确认实际名称。

npx skills add 'https://github.com/callstackincubator/agent-skills' --list

npx skills add 'https://github.com/callstackincubator/agent-skills' --skill 'react-navigation'

CLI 会交互选择目标 Agent，默认安装到项目；用户级安装使用 -g。先通过查看命令核对仓库内容，再用 npx skills list 检查已安装技能。

SKILL.md 原文可复制，不会改动源文件

---
name: react-navigation
description: Provides React Navigation UI patterns for stacks, tabs, drawers etc. Use when building navigation UIs with React Navigation, configuring headers, bottom sheets or handling safe areas and insets.
license: MIT
---

# React Navigation

## Overview

Guide for building navigation UIs with React Navigation.

This skill only applies to React Navigation 7. The API and patterns may not work with different versions.

## API Selection

React Navigation offers two API - object-based `Static API` and component-based `Dynamic API`.

- **Existing Apps**: Check the current navigation setup and follow the same API style when using the references
- **New Apps**: If the app does not have an existing navigation setup yet, prefer `Static API`

## When to Apply

Reference this skill when:

- Building navigation UI patterns such as stacks, tabs, drawers, sheets etc.
- Configuring headers and other built-in navigator UI
- Handling safe areas and insets in navigation UI

## References

| File                                        | Description                    |
| ------------------------------------------- | ------------------------------ |
| [stacks.md][stacks]                         | Stack based navigation         |
| [form-sheet.md][form-sheet]                 | Bottom sheet and form sheets   |
| [bottom-tabs.md][bottom-tabs]               | Cross-platform bottom tabs     |
| [native-bottom-tabs.md][native-bottom-tabs] | Native bottom tabs             |
| [material-top-tabs.md][material-top-tabs]   | Swipeable Top tabs             |
| [drawers.md][drawers]                       | Drawer navigation and sidebars |
| [header.md][header]                         | Configuring headers            |
| [safe-areas.md][safe-areas]                 | Safe-area handling             |

## Problem -> Skill Mapping

| Problem                                                                   | Start With                                  |
| ------------------------------------------------------------------------- | ------------------------------------------- |
| Showing screens and modals in a stack                                     | [stacks.md][stacks]                         |
| Showing bottom sheets or form sheets                                      | [form-sheet.md][form-sheet]                 |
| Showing screens in bottom tabs or responsive sidebars with web support    | [bottom-tabs.md][bottom-tabs]               |
| Showing screens in native tabs on iOS & Android                           | [native-bottom-tabs.md][native-bottom-tabs] |
| Showing content in swipeable top tabs                                     | [material-top-tabs.md][material-top-tabs]   |
| Using a drawer or sidebar                                                 | [drawers.md][drawers]                       |
| Configuring the header in bottom tab or drawer navigator                  | [header.md][header]                         |
| Handling safe-area such as status bar, header insets, tab bar insets etc. | [safe-areas.md][safe-areas]                 |

[stacks]: references/stacks.md
[form-sheet]: references/form-sheet.md
[safe-areas]: references/safe-areas.md
[bottom-tabs]: references/bottom-tabs.md
[native-bottom-tabs]: references/native-bottom-tabs.md
[material-top-tabs]: references/material-top-tabs.md
[drawers]: references/drawers.md
[header]: references/header.md

阅读排版

name: react-navigation description: Provides React Navigation UI patterns for stacks, tabs, drawers etc. Use when building navigation UIs with React Navigation, configuring headers, bottom sheets or handling safe areas and insets. license: MIT

React Navigation

Overview

Guide for building navigation UIs with React Navigation.

This skill only applies to React Navigation 7. The API and patterns may not work with different versions.

API Selection

React Navigation offers two API - object-based Static API and component-based Dynamic API.

Existing Apps: Check the current navigation setup and follow the same API style when using the references
New Apps: If the app does not have an existing navigation setup yet, prefer Static API

When to Apply

Reference this skill when:

Building navigation UI patterns such as stacks, tabs, drawers, sheets etc.
Configuring headers and other built-in navigator UI
Handling safe areas and insets in navigation UI

References

| File | Description | | ------------------------------------------- | ------------------------------ | | stacks.md | Stack based navigation | | form-sheet.md | Bottom sheet and form sheets | | bottom-tabs.md | Cross-platform bottom tabs | | native-bottom-tabs.md | Native bottom tabs | | material-top-tabs.md | Swipeable Top tabs | | drawers.md | Drawer navigation and sidebars | | header.md | Configuring headers | | safe-areas.md | Safe-area handling |

反应导航

技能介绍

做什么

何时用

代理如何加载

文件分析

SKILL.md 与 Agent 调用

安装这个技能

name: react-navigation description: Provides React Navigation UI patterns for stacks, tabs, drawers etc. Use when building navigation UIs with React Navigation, configuring headers, bottom sheets or handling safe areas and insets. license: MIT

React Navigation

Overview

API Selection

When to Apply

References

Problem -> Skill Mapping

相关技能

技能创建者Skill Creator

克劳德胡布Clawdhub

团队指挥Agent Team Orchestration

超级力量Superpowers