react-navigation

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
ボトムタブや、Web 対応のレスポンシブなサイドバーに画面を表示する	bottom-tabs.md
iOS と Android のネイティブタブに画面を表示する	native-bottom-tabs.md
スワイプ可能なトップタブにコンテンツを表示する	material-top-tabs.md
ドロワーやサイドバーを使用する	drawers.md
ボトムタブまたはドロワーナビゲーターのヘッダーを設定する	header.md
ステータスバー、ヘッダーのインセット、タブバーのインセットなどのセーフエリアを扱う	safe-areas.md