react-native-brownfield-migration

React Native への移行

ブラウンフィールド移行を採用する決定がなされた後に限り、このスキルを使用してください。ユーザーがブラウンフィールド、グリーンフィールド、チェックポイントベースの方法、延期、または移行しない選択肢の間でまだ検討している場合は、まず assess-react-native-migration を使用してください。

概要

@callstack/react-native-brownfield を使用して、既存のネイティブアプリに React Native を段階的に導入するための、初期セットアップからホストアプリへの段階的な統合までを網羅した、具体的なワークフローです。

• Expo の経路
• Bare React Native の経路

ユーザーが移行または比較を明示的に求めている場合を除き、タスクごとに1つの経路を使用してください。

移行戦略

ブラウンフィールド移行の計画と実行には、次の戦略を使用してください。

1. アプリの状態を評価し、Expo または bare の経路を選択します。
2. @callstack/react-native-brownfield を使用して初期セットアップを行います。
3. RN ソースアプリから RN アーティファクト（XCFramework／AAR）をパッケージ化します。
4. RN の画面を1つホストアプリに統合し、起動時と実行時の動作を検証します。
5. 機能または画面ごとに統合を繰り返し、段階的に展開します。

エージェントのガードレール（全般）

すべてのリファレンスファイルで、次のルールを適用してください。

1. 最初に経路を1つ選択し（Expo または bare）、手順を混在させないでください。
2. ドキュメントのプレースホルダー（<framework_target_name>、<android_module_name>、<registered_module_name>）を使用し、プロジェクトファイルを参照して値を確定してください。
3. ホストアプリへの統合に進む前に、各パッケージ化コマンドを検証してください。
4. これらのリファレンスにあるフラグの表を参照する前に、npx brownfield <command> --help を実行してください。ヘルプの出力を優先してください。
5. 安定したプロジェクト設定はフラグで繰り返し指定せず、brownfield.config.* に一度だけ記述してください。詳しくは cli-and-config.md を参照してください。
6. プラットフォーム別の長いコード例や CLI オプションの詳細には、公式ドキュメントを優先してください。
7. 可能な場合、ホストアプリが React Native API を直接使用しないようにしてください（ファサード方式）。
8. 起動時と実行時の検証では、agent-device を使ってホストアプリを開き、RN の画面に移動してスナップショット／スクリーンショットを取得し、デバイスの証拠を収集してください。agent-device がなく、検証に必要な場合は、環境で承認された信頼できる方法でインストールするか、ユーザーにインストールまたは有効化を依頼してください。

正式ドキュメント

• クイックスタート
• Expo の統合
• iOS の統合
• Android の統合
• Brownfield CLI
• 設定
• ガイドライン
• トラブルシューティング

経路選択ゲート（最初に必ず実行）

リファレンスファイルを選択する前に、プロジェクトを分類してください。

1. React Native アプリがまだ存在しない場合は、Expo 作成経路を使用します。
   • expo-create-app.md -> expo-quick-start.md
2. React Native アプリが存在する場合は、package.json と app.json を確認します。
   • expo が存在する場合、または Expo プラグインのワークフローが求められている場合は Expo を選択します。
   • Expo 経路の要件がなく、ネイティブフォルダーと直接的な RN CLI ワークフローを使用している場合は Bare RN を選択します。
3. それでも不明な場合は、選択肢を絞るための質問を1つしてください。
4. 必ず1つだけの経路を選んで進めてください。

適用する場面

以下の場合に、このパッケージを参照してください。

• ネイティブ専用アプリから React Native または Expo への段階的な移行が承認され、実装する場合
• Expo または bare React Native プロジェクト向けのブラウンフィールド統合フローを作成する場合
• @callstack/react-native-brownfield を使用して初期セットアップを行う場合
• React Native アプリから iOS XCFramework 成果物を生成する場合
• React Native アプリから Android AAR 成果物を生成して公開する場合
• 生成した成果物をホスト iOS／Android アプリに統合する場合

クイックリファレンス

ファイル	説明
quick-start.md	共通の事前確認と必須のパス選択ゲート
cli-and-config.md	CLI コマンド、全フラグ一覧、設定ファイル、成果物のレイアウト、コード生成の副作用
runtime-api.md	ホスト <-> RN API の概要（JS、Swift、Kotlin）とリファレンスアプリ
expo-create-app.md	Expo ブラウンフィールドのセットアップ前に新しい Expo アプリをスキャフォールドする方法
expo-quick-start.md	Expo プラグインのセットアップとパッケージ化の準備
expo-ios-integration.md	Expo の iOS パッケージ化とホスト起動の統合
expo-android-integration.md	Expo の Android パッケージ化、公開、ホスト統合
bare-quick-start.md	bare React Native の基本セットアップ
bare-ios-xcframework-generation.md	bare iOS XCFramework の生成
bare-android-aar-generation.md	bare Android AAR の生成と公開
bare-ios-native-integration.md	bare iOS ホストへの統合
bare-android-native-integration.md	bare Android ホストへの統合

問題 -> スキルの対応

問題	参照先
まず移行パスを決定する必要がある	assess-react-native-migration
Expo と bare のどちらのパスにするか決める必要がある	quick-start.md
CLI フラグ、設定ファイルの形式、または成果物のパスを確認する必要がある	cli-and-config.md
ホスト <-> RN API の名前、シグネチャ、または動作するサンプルアプリが必要	runtime-api.md
ホストと RN 間で状態を共有する必要がある、または型付きの RN -> ネイティブナビゲーションが必要	brownie / brownfield-navigation skills
ブラウンフィールド用に新しい Expo アプリを作成する必要がある	expo-create-app.md
Expo ブラウンフィールドのセットアップとプラグインの接続が必要	expo-quick-start.md
Expo iOS のブラウンフィールド統合が必要	expo-ios-integration.md
Expo Android のブラウンフィールド統合が必要	expo-android-integration.md
bare RN の基本セットアップが必要	bare-quick-start.md
bare RN iOS XCFramework の生成が必要	bare-ios-xcframework-generation.md
bare RN Android AAR の生成／公開が必要	bare-android-aar-generation.md
bare RN iOS ホストへの統合が必要	bare-ios-native-integration.md
bare RN Android ホストへの統合が必要	bare-android-native-integration.md

関連スキル

• 移行方法を選択する前に、React Native の移行を評価するを参照してください。
• brownie（ホストと RN 間の状態共有）と brownfield-navigation（型安全な RN からネイティブへのナビゲーション）は別のリポジトリから提供されています。名前を指定して実行し、インストールされていない場合は公式ドキュメントを参照してください。