Migration vers React Native
N'utilisez cette compétence qu'après avoir pris la décision d'adopter une migration brownfield. Lorsque l'utilisateur choisit encore entre brownfield, greenfield, un chemin basé sur des jalons (checkpoint), un report ou aucune migration, utilisez d'abord assess-react-native-migration.
Aperçu
Flux de travail prescriptif pour l'adoption incrémentale de React Native dans des applications natives existantes en utilisant @callstack/react-native-brownfield, de la configuration initiale à l'intégration hôte par phases.
- Voie Expo
- Voie React Native nu (Bare RN)
Utilisez une seule voie par tâche, sauf si l'utilisateur demande explicitement une migration ou une comparaison.
Stratégie de migration
Utilisez cette stratégie pour la planification et l'exécution de la migration brownfield :
- Évaluer l'état de l'application et sélectionner la voie Expo ou RN nu.
- Effectuer la configuration initiale avec
@callstack/react-native-brownfield. - Empaqueter les artefacts RN (
XCFramework/AAR) à partir de l'application source RN. - Intégrer une surface RN dans l'application hôte et valider le démarrage/l'exécution.
- Répéter l'intégration par fonctionnalité/écran pour un déploiement incrémental.
Garde-fous de l'agent (Globaux)
Appliquez ces règles sur l'ensemble des fichiers de référence :
- Sélectionnez d'abord un seul chemin (Expo ou RN nu) et ne mélangez pas les étapes.
- Utilisez les placeholders issus de la documentation (
<framework_target_name>,<android_module_name>,<registered_module_name>) et résolvez-les à partir des fichiers du projet. - Validez chaque commande d'empaquetage avant de passer à l'intégration hôte.
- Exécutez
npx brownfield <commande> --helpavant de vous fier à un tableau d'options dans ces références ; la sortie de--helpprévaut. - Écrivez les paramètres de projet stables une seule fois dans
brownfield.config.*au lieu de répéter les options — voir cli-and-config.md. - Préférez la documentation officielle pour les longs extraits de code spécifiques à une plateforme et les détails des options de la CLI.
- Dans la mesure du possible, isolez les applications hôtes des API React Native directes (approche par façade).
- Pour la vérification du démarrage/de l'exécution, utilisez
agent-devicepour ouvrir l'application hôte, naviguer vers la surface RN, capturer des snapshots/captures d'écran et collecter des preuves sur l'appareil. Siagent-deviceest manquant et que la vérification en a besoin, installez-le via le chemin approuvé/fiable de l'environnement ou demandez à l'utilisateur de l'installer ou de l'activer.
Documentation canonique
- Guide de démarrage rapide
- Intégration Expo
- Intégration iOS
- Intégration Android
- CLI Brownfield
- Configuration
- Recommandations
- Dépannage
Porte de sélection du chemin (À exécuter en premier)
Avant de sélectionner un fichier de référence, classez le projet :
- S'il n'existe pas encore d'application React Native, utilisez le chemin de création Expo :
- Si une application React Native existe, inspectez
package.jsonetapp.json:- Expo si
expoest présent ou si le workflow de plugin Expo est demandé. - RN nu si les dossiers natifs et le workflow direct de la CLI RN sont utilisés sans les exigences du chemin Expo.
- Expo si
- Si ce n'est toujours pas clair, posez une question de désambiguïsation.
- Continuez avec un seul chemin.
Quand appliquer cette compétence
Référencez ce package lors des situations suivantes :
- Mise en œuvre d'une migration incrémentale acceptée d'applications purement natives vers React Native ou Expo
- Création de flux d'intégration brownfield pour des projets Expo ou React Native nu
- Configuration initiale avec
@callstack/react-native-brownfield - Génération d'artefacts iOS XCFramework à partir d'une application React Native
- Génération et publication d'artefacts Android AAR à partir d'une application React Native
- Intégration d'artefacts générés dans des applications hôtes iOS/Android
Référence rapide
| Fichier | Description |
|---|---|
| quick-start.md | Pré-vérification partagée et porte de sélection obligatoire du chemin |
| cli-and-config.md | Commandes CLI, ensembles complets d'options, fichier de configuration, structure des artefacts, effets de bord de génération de code |
| runtime-api.md | Surface API Hôte <-> RN (JS, Swift, Kotlin) et applications de référence |
| expo-create-app.md | Créer une nouvelle application Expo avant la configuration brownfield Expo |
| expo-quick-start.md | Configuration du plugin Expo et préparation à l'empaquetage |
| expo-ios-integration.md | Empaquetage Expo iOS et intégration au démarrage de l'hôte |
| expo-android-integration.md | Empaquetage, publication et intégration hôte Expo Android |
| bare-quick-start.md | Configuration de base React Native nu |
| bare-ios-xcframework-generation.md | Génération XCFramework pour iOS nu |
| bare-android-aar-generation.md | Génération et publication AAR pour Android nu |
| bare-ios-native-integration.md | Intégration hôte iOS pour RN nu |
| bare-android-native-integration.md | Intégration hôte Android pour RN nu |
Correspondance problème -> compétence
| Problème | Commencez par |
|---|---|
| Décision sur le chemin de migration d'abord | assess-react-native-migration |
| Décision entre le chemin Expo ou RN nu | quick-start.md |
| Besoin d'une option CLI, de la structure du fichier de configuration ou des chemins des artefacts | cli-and-config.md |
| Besoin d'un nom d'API Hôte <-> RN, d'une signature ou d'un exemple d'application fonctionnel | runtime-api.md |
| Besoin d'état partagé entre l'hôte et RN, ou de navigation typée RN -> natif | Compétences brownie / brownfield-navigation |
| Besoin de créer une nouvelle application Expo pour le brownfield | expo-create-app.md |
| Besoin de configuration brownfield Expo et de câblage du plugin | expo-quick-start.md |
| Besoin d'intégration brownfield Expo iOS | expo-ios-integration.md |
| Besoin d'intégration brownfield Expo Android | expo-android-integration.md |
| Besoin de configuration de base RN nu | bare-quick-start.md |
| Besoin de génération XCFramework pour iOS RN nu | bare-ios-xcframework-generation.md |
| Besoin de génération/publication AAR pour Android RN nu | bare-android-aar-generation.md |
| Besoin d'intégration hôte iOS pour RN nu | bare-ios-native-integration.md |
| Besoin d'intégration hôte Android pour RN nu | bare-android-native-integration.md |
Compétences connexes
- Évaluer la migration React Native avant de sélectionner le chemin de migration.
brownie(état partagé hôte <-> RN) etbrownfield-navigation(navigation typée RN -> natif) proviennent d'un autre dépôt : invoquez-les par leur nom, et référez-vous à la documentation canonique s'ils ne sont pas installés.