React Navigation
總覽
使用 React Navigation 建立導航 UI 的指南。
此技能僅適用於 React Navigation 7。API 與模式可能不適用於其他版本。
API 選擇
React Navigation 提供兩種 API：物件導向的「靜態 API」與元件導向的「動態 API」。
- 既有應用程式：請檢查現有的導航設定，並在使用參考文件時遵循相同的 API 風格
- 新應用程式：如果應用程式尚未有任何導航設定，建議優先使用「靜態 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 |
| 在底部頁籤或具備網頁支援的響應式側邊欄中顯示畫面 | bottom-tabs.md |
| 在 iOS 與 Android 的原生頁籤中顯示畫面 | native-bottom-tabs.md |
| 在可滑動頂部頁籤中顯示內容 | material-top-tabs.md |
| 使用抽屜或側邊欄 | drawers.md |
| 設定底部頁籤或抽屜導航器中的標題列 | header.md |
| 處理安全區域，例如狀態列、標題列邊界插入、頁籤列邊界插入等 | safe-areas.md |