Migration zu React Native
Verwende dieses Skill nur, nachdem die Entscheidung für den Brownfield-Migrationsansatz gefallen ist. Wenn der Benutzer noch zwischen Brownfield, Greenfield, einem checkpoint-basierten Pfad, einem Aufschub oder keiner Migration wählt, verwende zuerst assess-react-native-migration.
Überblick
Vorschreibender Workflow für die inkrementelle Einführung von React Native in bestehenden nativen Apps unter Verwendung von @callstack/react-native-brownfield, von der initialen Einrichtung bis zur schrittweisen Host-Integration.
- Expo-Pfad
- Bare-React-Native-Pfad
Verwende pro Aufgabe einen Pfad, es sei denn, der Benutzer fragt explizit nach Migration oder Vergleich.
Migrationsstrategie
Verwende diese Strategie für die Planung und Durchführung der Brownfield-Migration:
- Beurteile den App-Zustand und wähle den Expo- oder Bare-Pfad aus.
- Führe die initiale Einrichtung mit
@callstack/react-native-brownfielddurch. - Paketiere RN-Artefakte (
XCFramework/AAR) aus der RN-Quell-App. - Integriere eine RN-Oberfläche in die Host-App und validiere den Start/Laufzeit.
- Wiederhole die Integration pro Feature/Bildschirm für eine schrittweise Auslieferung.
Agent-Begrenzungen (Global)
Wende diese Regeln auf alle Referenzdateien an:
- Wähle zuerst einen Pfad (Expo oder Bare) und vermische keine Schritte.
- Verwende Platzhalter aus den Docs (
<framework_target_name>,<android_module_name>,<registered_module_name>) und ersetze sie durch Projektdateien. - Validiere jeden Paketierungsbefehl, bevor du zur Host-Integration übergehst.
- Führe
npx brownfield <command> --helpaus, bevor du dich auf eine Flag-Tabelle in diesen Referenzen verlässt; die Hilfeausgabe hat Vorrang. - Schreibe stabile Projekteinstellungen einmal in
brownfield.config.*, anstatt Flags zu wiederholen – siehe cli-and-config.md. - Bevorzuge die offiziellen Docs für lange Plattform-Ausschnitte und CLI-Optionsdetails.
- Halte Host-Apps nach Möglichkeit von direkten React Native APIs fern (Fassaden-Ansatz).
- Verwende für Start-/Laufzeitverifikation
agent-device, um die Host-App zu öffnen, zur RN-Oberfläche zu navigieren, Snapshots/Screenshots zu machen und Gerätebeweise zu sammeln. Falls es fehlt und die Verifikation es benötigt, installiere es über den genehmigten/vertrauenswürdigen Pfad der Umgebung oder bitte den Benutzer, es zu installieren oder zu aktivieren.
Kanonische Docs
- Quick Start
- Expo Integration
- iOS Integration
- Android Integration
- Brownfield CLI
- Konfiguration
- Richtlinien
- Fehlerbehebung
Pfadauswahl-Gate (Muss zuerst ausgeführt werden)
Bevor du eine Referenzdatei auswählst, klassifiziere das Projekt:
- Wenn noch keine React Native App existiert, verwende den Expo-Erstellungspfad:
- Wenn eine React Native App existiert, überprüfe
package.jsonundapp.json:- Expo, wenn
expovorhanden ist oder der Expo-Plugin-Workflow angefordert wird. - Bare RN, wenn native Ordner und direkter RN-CLI-Workflow ohne Expo-Pfad-Anforderungen verwendet werden.
- Expo, wenn
- Falls immer noch unklar, stelle eine einzige Abgrenzungsfrage.
- Fahre mit genau einem Pfad fort.
Wann anzuwenden
Referenziere dieses Paket bei:
- Implementierung einer akzeptierten inkrementellen Migration von rein nativen Apps zu React Native oder Expo
- Erstellung von Brownfield-Integrationsflüssen für Expo- oder Bare-React-Native-Projekte
- Durchführung der initialen Einrichtung mit
@callstack/react-native-brownfield - Generierung von iOS XCFramework-Artefakten aus einer React Native App
- Generierung und Veröffentlichung von Android AAR-Artefakten aus einer React Native App
- Integration der generierten Artefakte in Host-iOS/Android-Apps
Kurzreferenz
| Datei | Beschreibung |
|---|---|
| quick-start.md | Gemeinsamer Preflight und obligatorisches Pfadauswahl-Gate |
| cli-and-config.md | CLI-Befehle, vollständige Flag-Sets, Konfigurationsdatei, Artefakt-Layout, Codegen-Seiteneffekte |
| runtime-api.md | Host <-> RN API-Oberfläche (JS, Swift, Kotlin) und Referenz-Apps |
| expo-create-app.md | Gerüst einer neuen Expo-App vor der Expo-Brownfield-Einrichtung |
| expo-quick-start.md | Expo-Plugin-Setup und Paketierungsbereitschaft |
| expo-ios-integration.md | Expo iOS Paketierung und Host-Start-Integration |
| expo-android-integration.md | Expo Android Paketierung, Veröffentlichung und Host-Integration |
| bare-quick-start.md | Bare React Native Basis-Setup |
| bare-ios-xcframework-generation.md | Bare iOS XCFramework-Generierung |
| bare-android-aar-generation.md | Bare Android AAR-Generierung und Veröffentlichung |
| bare-ios-native-integration.md | Bare iOS Host-Integration |
| bare-android-native-integration.md | Bare Android Host-Integration |
Problem -> Skill-Zuordnung
| Problem | Beginne mit |
|---|---|
| Zuerst Entscheidung über Migrationspfad benötigt | assess-react-native-migration |
| Entscheidung über Expo- vs. Bare-Pfad benötigt | quick-start.md |
| CLI-Flag, Konfigurationsdatei-Form oder Artefakt-Pfade benötigt | cli-and-config.md |
| Host <-> RN API-Name, Signatur oder funktionierende Beispiel-App benötigt | runtime-api.md |
| Gemeinsamer Zustand zwischen Host und RN oder typisierte RN -> native Navigation benötigt | brownie / brownfield-navigation Skills |
| Neue Expo-App für Brownfield erstellen | expo-create-app.md |
| Expo-Brownfield-Setup und Plugin-Verkabelung | expo-quick-start.md |
| Expo iOS Brownfield-Integration | expo-ios-integration.md |
| Expo Android Brownfield-Integration | expo-android-integration.md |
| Bare RN Basis-Setup | bare-quick-start.md |
| Bare RN iOS XCFramework-Generierung | bare-ios-xcframework-generation.md |
| Bare RN Android AAR-Generierung/Veröffentlichung | bare-android-aar-generation.md |
| Bare RN iOS Host-Integration | bare-ios-native-integration.md |
| Bare RN Android Host-Integration | bare-android-native-integration.md |
Verwandte Skills
- Assess React Native Migration vor der Auswahl des Migrationspfads.
brownie(gemeinsamer Host <-> RN Zustand) undbrownfield-navigation(typisierte RN -> native Navigation) werden aus einem anderen Repository ausgeliefert: rufe sie beim Namen auf, und falle auf die kanonischen Docs zurück, falls sie nicht installiert sind.