React Navigation
概要
React Navigation を使用したナビゲーション UI 構築のためのガイドです。
このスキルは React Navigation 7 にのみ適用されます。API とパターンは、異なるバージョンでは動作しない可能性があります。
API の選択
React Navigation は、オブジェクトベースの Static API とコンポーネントベースの Dynamic API の 2 つの API を提供します。
- 既存のアプリ: 現在のナビゲーション設定を確認し、リファレンスを使用する際は同じ API スタイルに従ってください。
- 新しいアプリ: まだナビゲーション設定がない場合は、
Static 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 |