React Native への移行について
このスキルは、ブラウンフィールド移行を採用する決定が行われた後にのみ使用してください。ユーザーがまだブラウンフィールド、グリーンフィールド、チェックポイントベースのパス、延期、または移行なしのいずれかを選択している段階では、最初に assess-react-native-migration を使用してください。
概要
@callstack/react-native-brownfield を使用して、既存のネイティブアプリにReact Nativeを段階的に導入するための指示ワークフローです。初期セットアップから段階的なホスト統合までをカバーします。
- Expoトラック
- Bare React Nativeトラック
タスクごとに1つのトラックを使用します。ユーザーが明示的に移行や比較を要求した場合を除きます。
移行戦略
ブラウンフィールド移行の計画と実行には、以下の戦略を使用します:
- アプリの状態を評価し、ExpoまたはBareのパスを選択します。
@callstack/react-native-brownfieldを使用して初期セットアップを実行します。- RNソースアプリからRNアーティファクト（
XCFramework/AAR）をパッケージ化します。 - 1つのRNサーフェスをホストアプリに統合し、起動/ランタイムを検証します。
- 機能/画面ごとに統合を繰り返し、段階的なロールアウトを行います。
エージェントガードレール（グローバル）
すべての参照ファイルにわたって、以下のルールを適用します:
- まず1つのパス（ExpoまたはBare）を選択し、ステップを混在させないでください。
- ドキュメントのプレースホルダー（
<framework_target_name>、<android_module_name>、<registered_module_name>）を使用し、プロジェクトファイルから解決します。 - ホスト統合に進む前に、各パッケージ化コマンドを検証します。
- これらの参照のフラグテーブルに依存する前に
npx brownfield <command> --helpを実行します。Help出力が優先されます。 - フラグを繰り返す代わりに、安定したプロジェクト設定を一度
brownfield.config.*に書き込みます。詳細は cli-and-config.md を参照してください。 - 長いプラットフォームスニペットやCLIオプションの詳細については、公式ドキュメントを優先します。
- 可能な限り、ホストアプリを直接のReact Native APIから隔離します（facadeアプローチ）。
- 起動/ランタイム検証には、
agent-deviceを使用してホストアプリを開き、RNサーフェスに移動し、スナップショット/スクリーンショットをキャプチャし、デバイスエビデンスを収集します。これが不足しており検証に必要な場合は、環境の承認済み/信頼済みパスを通じてインストールするか、ユーザーにインストールまたは有効化を依頼します。
正規ドキュメント
パス選択ゲート（必ず最初に実行）
参照ファイルを選択する前に、プロジェクトを分類します:
- React Nativeアプリがまだ存在しない場合は、Expo作成パスを使用します:
- React Nativeアプリが存在する場合は、
package.jsonとapp.jsonを検査します:expoが存在する場合、またはExpoプラグインワークフローが要求されている場合はExpo。- Expoパスの要件がなく、ネイティブフォルダと直接RN CLIワークフローが使用されている場合はBare RN。
- まだ不明な場合は、1つの識別質問をします。
- 正確に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 スキル |
| ブラウンフィールド用の新しい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 |
関連スキル
- 移行パスを選択する前に、Assess React Native migration を評価します。
brownie（共有ホスト <-> RN状態）とbrownfield-navigation（型付けされたRN -> ネイティブナビゲーション）は別のリポジトリから提供されます。名前で呼び出し、インストールされていない場合は正規ドキュメントにフォールバックします。