migrate-to-static-config について
JSX ベースの動的な設定から Static API へナビゲーターを移行する、React Navigation 開発者向けのスキルです。動作、型、ディープリンクの維持を重視し、バージョン別の資料と検証手順を提供します。
主な機能
- 01動的ナビゲーターから静的設定への移行
- 02動作とディープリンクの維持
- 03React Navigation のバージョン別資料
- 04ラッパーと画面データの移行ガイド
- 05編集後の検証チェックリスト
活用シーン
- 01JSX ナビゲーターを静的設定へ変換
- 02React Navigation 7.x プロジェクトの移行
- 03React Navigation 8.x プロジェクトの移行
- 04移行後の動作とリンクの確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ react-navigation/ skills --skill migrate-to-static-configインストール後、Claude Code で/migrate-to-static-configを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlreferences/react-navigation-7-custom-navigators.mdreact-navigation-7-get-component.mdreact-navigation-7-mixing-apis.mdreact-navigation-7-render-callbacks.mdreact-navigation-7.mdreact-navigation-8-custom-navigators.mdreact-navigation-8-get-component.mdreact-navigation-8-mixing-apis.mdreact-navigation-8-render-callbacks.mdreact-navigation-8.md詳細
静的設定への移行
目的
React Navigation のナビゲーターを JSX ベースの動的な設定から静的設定に変換し、動作、型付け、ディープリンクを維持します。
使用するタイミング
React Navigation で画面を Dynamic API から Static API に移行するときに使用します。
適用方針
このスキルのパターンは、網羅的なリストではなく、標準的な出発点として扱ってください。完全に一致する例がなくても、作業の妨げにはなりません。
- ローカルのコードを最も近いパターンに当てはめて調整します。構造が異なる場合は、同等の方法を推測してください。
- 動作を維持できる、最もシンプルな移行方法を優先します。
- 変更は最小限かつ局所的にし、既存のコードスタイルと React Navigation が意図する静的 API に合わせてください。
- よりシンプルなパターンでは動作を明らかに維持できない場合を除き、独自の抽象化は避けてください。
判断基準
次の優先順位に従ってください。
- 直接的な静的設定への変換。
- ナビゲーターレベルのラッパーや動的なナビゲーターのプロパティには、静的設定と
.with()を組み合わせる。 - レンダーコールバック経由で渡していた追加の画面データには、静的設定とコンテキストを組み合わせる。
- 動作を大きく変えずに静的設定で画面構造を表現できない場合に限り、ナビゲーターを動的なままにする。
確認を求めるタイミング
まずローカルのコードを確認してください。
関連するナビゲーターとその直接の呼び出し元を読んだ後も、最終的な画面構造、リンク動作、維持する動作を静的 API にどのように対応させるか確信を持って説明できない場合は、作業を中断し、コードを編集する前にユーザーに確認してください。
次の場合は確認を求めてください。
- 動作の一部がローカルの抽象化の背後に隠れている場合。
- 移行にあたって、どの動作が意図されたものか推測する必要がある場合。
- 関連するヘルパーも同じ変更の一部として更新すべきか不明な場合。
参照資料
まず package.json で @react-navigation/native を確認してください。
7.xの場合は、references/react-navigation-7.mdを読みます。8.xの場合は、references/react-navigation-8.mdを読みます。
静的設定は、7.x より前のバージョンではサポートされていません。
該当するバージョンのメインの参照ファイルを読み込んでください。メインの参照ファイルから、関連資料(カスタムナビゲーター、レンダーコールバック、getComponent、API の併用)が案内されています。移行対象のコードベースに該当するパターンがある場合に限り、それぞれの資料を読み込んでください。
検証
コードを編集した後は、次の手順を実行してください。
package.jsonまたはロックファイルからパッケージマネージャーを特定します。- スクリプトが用意されている場合は、既存の型チェッカー、リンター、関連するテストを実行します。
- 検証手順を実行できない場合は、その理由を報告し、読み込んだ参照資料のチェックリストに照らして手動でレビューします。