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 從公開儲存庫中收錄這些內容。

檢舉或申請下架