React Navigation

作者 callstackincubator61e6e7dfdf3aMIT1.6K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库今天更新

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.

AI 生成的概览

指导使用 React Navigation 7 构建导航界面:堆栈、标签页、抽屉、表单页、页头与安全区域。

功能
该技能为使用 React Navigation 7 构建导航界面提供参考指导。内容涵盖堆栈导航、底部表单与表单页、底部标签页、原生底部标签页、Material 顶部标签页、抽屉导航、页头配置以及安全区域处理。它还说明如何在基于对象的 Static API 与基于组件的 Dynamic API 之间选择,并将常见问题映射到相应的参考文件。
适用场景
适用于在 React Navigation 应用中构建堆栈、标签页、抽屉或表单页等导航界面模式。也用于配置页头及其他内置导航器 UI,以及处理导航界面中的安全区域与内边距。
运行要求
无需脚本,仅包含说明与参考文档。该技能专门针对 React Navigation 7,因此预期项目使用该版本。

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

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

Problem -> Skill Mapping

ProblemStart With
Showing screens and modals in a stackstacks.md [blocked]
Showing bottom sheets or form sheetsform-sheet.md [blocked]
Showing screens in bottom tabs or responsive sidebars with web supportbottom-tabs.md [blocked]
Showing screens in native tabs on iOS & Androidnative-bottom-tabs.md [blocked]
Showing content in swipeable top tabsmaterial-top-tabs.md [blocked]
Using a drawer or sidebardrawers.md [blocked]
Configuring the header in bottom tab or drawer navigatorheader.md [blocked]
Handling safe-area such as status bar, header insets, tab bar insets etc.safe-areas.md [blocked]

来源与署名

来源:callstackincubator/agent-skills位于skills/react-navigation提交61e6e7d

许可证: MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架