Integratie met bestaande apps · React Native (2024)

Kernbegrippen​

De sleutels tot het integreren van React Native-componenten in uw Android-applicatie zijn:

1. Stel React Native-afhankelijkheden en directorystructuur in.
2. Ontwikkel uw React Native-componenten in JavaScript.
3. Voeg een ... toeReactRootViewnaar uw Android-app. Deze weergave zal dienen als de container voor uw React Native-component.
4. Start de React Native-server en voer uw native applicatie uit.
5. Controleer of het React Native-aspect van uw applicatie werkt zoals verwacht.

Vereisten​

Volg de React Native CLI Quickstart in deinstallatiehandleiding voor de omgevingom uw ontwikkelomgeving te configureren voor het bouwen van React Native-apps voor Android.

1. Stel een directorystructuur in​

Om een ​​soepele ervaring te garanderen, maakt u een nieuwe map voor uw geïntegreerde React Native-project en kopieert u vervolgens uw bestaande Android-project naar een/Androidsubmap.

2. Installeer JavaScript-afhankelijkheden​

Ga naar de hoofdmap van uw project en maak een nieuwpakket.jsonbestand met de volgende inhoud:

{
 "naam": "MijnReactNativeApp",
 "versie": "0.0.1",
 "privaat": WAAR,
 "scripts": {
 "begin": "garen reageren-native start"
 }
}

Zorg er vervolgens voor dat je het hebtinstalleerde de garenpakketbeheerder.

Installeer deReageerEnreactiefpakketjes. Open een terminal of opdrachtprompt en navigeer vervolgens naar de map met uwpakket.jsonbestand en uitvoeren:

$garen toevoegenreactief

Dit zal een bericht afdrukken dat lijkt op het volgende (scroll omhoog in de garenuitvoer om het te zien):

waarschuwing "[emailprotected]"heeft een onvervulde afhankelijkheid van leeftijdsgenoten"[emailprotected]".

Dit is OK, het betekent dat we ook React moeten installeren:

$garen toevoegen [emailprotected]_gedrukt_hierboven

Garen heeft een nieuwe gemaakt/knooppunt_modulesmap. In deze map worden alle JavaScript-afhankelijkheden opgeslagen die nodig zijn om uw project te bouwen.

Toevoegennode_modules/aan jouw.gitignorebestand.

React Native toevoegen aan uw app​

Maven configureren​

Voeg de React Native- en JSC-afhankelijkheid toe aan die van uw appbouw.gradlebestand:

afhankelijkheden {
implementatie "com.android.support:appcompat-v7:27.1.1"
...
implementatie "com.facebook.react:react-native:+" // Van node_modules
implementatie "org.webkit:android-jsc:+"
}

Als u er zeker van wilt zijn dat u altijd een specifieke React Native-versie gebruikt in uw native build, vervangt u+met een echte React Native-versie waarvan je hebt gedownloadnpm.

Voeg een item toe voor de lokale React Native- en JSC maven-directory's op het hoogste niveaubouw.gradle. Zorg ervoor dat je het toevoegt aan het blok "allprojects", boven andere maven-repositories:

alleprojecten {
opslagplaatsen {
meester {
// Alle React Native (JS, Android binaries) is geïnstalleerd vanaf npm
url "$rootDir/../node_modules/react-native/android"
}
meester {
// Android JSC wordt geïnstalleerd vanaf npm
url("$rootDir/../node_modules/jsc-android/dist")
}
...
}
...
}

Zorg ervoor dat het pad correct is! U zou geen "Failed to resolve: com.facebook.react:react-native:0.x.x"-fouten moeten tegenkomen na het uitvoeren van Gradle-synchronisatie in Android Studio.

Automatisch koppelen van native modules inschakelen​

Om de kracht van te gebruikenautomatisch koppelen, we moeten het een paar plaatsen toepassen. Voeg eerst het volgende item toe aaninstellingen.gradle:

toepassen vanaf: bestand("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); toepassenNativeModulesSettingsGradle(instellingen)

Voeg vervolgens het volgende item helemaal onderaan hetapp/build.gradle:

toepassen vanaf: bestand("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); toepassenNativeModulesAppBuildGradle(project)

Machtigingen configureren​

Zorg er vervolgens voor dat u de internettoestemming in uwAndroidManifest.xml:

<gebruik-toestemming androïde:naam="android.toestemming.INTERNET" />

Als u toegang nodig heeft tot deDevSettingsActiviteittoevoegen aan jeAndroidManifest.xml:

<activiteit androïde:naam="com.facebook.react.devsupport.DevSettingsActivity" />

Dit wordt alleen gebruikt in de dev-modus wanneer JavaScript opnieuw wordt geladen vanaf de ontwikkelserver, dus u kunt dit indien nodig verwijderen in release-builds.

Cleartext-verkeer (API-niveau 28+)​

Vanaf Android 9 (API-niveau 28) is cleartext-verkeer standaard uitgeschakeld; dit voorkomt dat uw toepassing verbinding maakt met hetMetro bundelaar. De onderstaande wijzigingen staan ​​cleartext-verkeer toe in builds voor foutopsporing.

1. Pas degebruiktCleartextTrafficoptie voor uw DebugAndroidManifest.xml​

<sollicitatie
 androïde:gebruiktCleartextTraffic="WAAR" hulpmiddelen:doelApi="28" >
 
sollicitatie>

Dit is niet vereist voor release-builds.

Voor meer informatie over Network Security Config en het cleartext-verkeersbeleidzie deze link.

Code-integratie​

Nu gaan we de native Android-applicatie daadwerkelijk aanpassen om React Native te integreren.

De React Native-component​

Het eerste stukje code dat we zullen schrijven, is de eigenlijke React Native-code voor het nieuwe "High Score" -scherm dat in onze applicatie zal worden geïntegreerd.

1. Maak eenindex.jsbestand​

Maak eerst een leegindex.jsbestand in de hoofdmap van uw React Native-project.

index.jsis het startpunt voor React Native-applicaties en is altijd vereist. Dat kan een klein bestand zijnvereisenHet is een ander bestand dat deel uitmaakt van uw React Native-component of -toepassing, of het kan alle code bevatten die ervoor nodig is. In ons geval zullen we alles erin stoppenindex.js.

2. Voeg je React Native-code toe​

In uwindex.js, maak je component. In ons voorbeeld hier zullen we een toevoegenonderdeel binnen een gestileerd:

importeren Reageer van 'Reageer';
importeren {AppRegistratie, Stijlblad, Tekst, Weergave} van 'reageren-native';

klas Hallo Wereld strekt zich uit Reageer.Onderdeel {
 veroorzaken() {
 opbrengst (
 <Weergave stijl={stijlen.container}>
 <Tekst stijl={stijlen.Hallo}>Hallo WereldTekst>
 Weergave>
 );
 }
}
wasstijlen= Stijlblad.creëren({
 container: {
 buigen: 1,
 rechtvaardigenInhoud: 'centrum',
 },
 Hallo: {
 lettertypegrootte: 20,
 tekstAlign: 'centrum',
 marge: 10,
 },
});

AppRegistratie.registreerComponent(
 'MijnReactNativeApp',
 () => Hallo Wereld,
);

3. Configureer machtigingen voor ontwikkelingsfout-overlay​

Als uw app is gericht op de AndroidAPI-niveau 23of hoger, zorg ervoor dat u de toestemming hebtandroid.toestemming.SYSTEM_ALERT_WINDOWingeschakeld voor de ontwikkelingsversie. U kunt dit controleren metInstellingen.canDrawOverlays(dit);. Dit is vereist in dev-builds omdat React Native-ontwikkelingsfouten boven alle andere vensters moeten worden weergegeven. Vanwege het nieuwe machtigingssysteem dat is geïntroduceerd in API-niveau 23 (Android M), moet de gebruiker het goedkeuren. Dit kan worden bereikt door de volgende code toe te voegen aan uw Activity's inonCreate()methode.

privaat laatste intOVERLAY_PERMISSION_REQ_CODE= 1; // Kies een willekeurige waarde

...

als (Bouwen.VERSIE.SDK_INT>= Bouwen.VERSION_CODES.M) {
 als (!Instellingen.canDrawOverlays(dit)) {
 opzetopzet= nieuw opzet(Instellingen.ACTION_MANAGE_OVERLAY_PERMISSION,
 Uri.ontleed("pakket:" + getPakketNaam()));
 startActivityForResult(opzet,OVERLAY_PERMISSION_REQ_CODE);
 }
}

eindelijk, deonActivityResult()methode (zoals weergegeven in de onderstaande code) moet worden overschreven om de toestemming Geaccepteerde of Geweigerde gevallen voor consistente UX af te handelen. Ook voor het integreren van native modules die gebruik maken vanstartActivityForResult, moeten we het resultaat doorgeven aan deonActivityResultmethode van onzeReactInstanceManagervoorbeeld.

@Overschrijven
beschermd leegte onActivityResult(intVerzoek code, intresultaatCode, opzetgegevens) {
 als (Verzoek code==OVERLAY_PERMISSION_REQ_CODE) {
 als (Bouwen.VERSIE.SDK_INT>= Bouwen.VERSION_CODES.M) {
 als (!Instellingen.canDrawOverlays(dit)) {
 // SYSTEM_ALERT_WINDOW toestemming niet verleend
 }
 }
 }
mReactInstanceManager.onActivityResult( dit,Verzoek code,resultaatCode,gegevens);
}

De magie:ReactRootView​

Laten we wat native code toevoegen om de React Native-runtime te starten en deze te vertellen om onze JS-component weer te geven. Om dit te doen, gaan we eenActiviteitdat creëert eenReactRootView, start een React-toepassing erin en stelt deze in als de belangrijkste inhoudsweergave.

Als u zich richt op Android-versie <5, gebruikt u deAppCompatActiviteitklas uit decom.android.support:appcompatpakket in plaats vanActiviteit.

openbaar klas MijnReactActiviteit strekt zich uit Activiteit implementeert DefaultHardwareBackBtnHandler {
 privaat ReactRootViewmReactRootView;
 privaat ReactInstanceManagermReactInstanceManager;

 @Overschrijven
 beschermd leegte opCreate(BundelopgeslagenInstanceState) {
 super.opCreate(opgeslagenInstanceState);
 SoLoader.in het(dit, vals);

mReactRootView= nieuw ReactRootView(dit);
 Lijst<ReageerPakket>pakketjes= nieuw PakketLijst(krijgApplicatie()).pakPakketten();
 // Pakketten die nog niet automatisch kunnen worden gekoppeld, kunnen hier handmatig worden toegevoegd, bijvoorbeeld:
 // packages.add(nieuwe MyReactNativePackage());
 // Vergeet niet om ze ook op te nemen in `settings.gradle` en `app/build.gradle`.

mReactInstanceManager= ReactInstanceManager.bouwer()
 .setApplicatie(krijgApplicatie())
 .setCurrentActivity(dit)
 .setBundleAssetName("index.android.bundel")
 .setJSMAinModulePath("inhoudsopgave")
 .addPakketten(pakketjes)
 .setUseDeveloperSupport(BuildConfig.DEBUGGEN)
 .setInitialLifecycleState(Levenscyclusstatus.HERVAT)
 .bouwen();
 // De string hier (bijv. "MyReactNativeApp") moet overeenkomen
 // de tekenreeks in AppRegistry.registerComponent() in index.js
mReactRootView.startReactApplicatie(mReactInstanceManager, "MijnReactNativeApp", nul);

 setContentView(mReactRootView);
 }

 @Overschrijven
 openbaar leegte beroepDefaultOnBackPressed() {
 super.onBackPressed();
 }
}

Als u een starterkit voor React Native gebruikt, vervangt u de tekenreeks "HelloWorld" door die in uw index.js-bestand (dit is het eerste argument voor deAppRegistry.registerComponent()methode).

Voer een bewerking "Projectbestanden synchroniseren met Gradle" uit.

Als u Android Studio gebruikt, gebruikt uAlt + Enterom alle ontbrekende import toe te voegen aan uw MyReactActivity-klasse. Wees voorzichtig met het gebruik van uw pakketBuildConfigen niet die van defacebookpakket.

We moeten het thema van instellenMijnReactActiviteitnaarTheme.AppCompat.Light.NoActionBaromdat sommige React Native UI-componenten afhankelijk zijn van dit thema.

<activiteit
 androïde:naam=".MijnReactActiviteit"
 androïde:etiket="@tekenreeks/app_naam"
 androïde:thema="@style/Theme.AppCompat.Light.NoActionBar">
activiteit>

AReactInstanceManagerkan worden gedeeld door meerdere activiteiten en/of fragmenten. U zult uw eigen willen makenReactFragmentofReageerActiviteiten heb een eenlinghouderdat houdt eenReactInstanceManager. Wanneer u deReactInstanceManager(bijvoorbeeld om deReactInstanceManageraan de levenscyclus van die activiteiten of fragmenten) gebruik die van de singleton.

Vervolgens moeten we enkele callbacks voor de levenscyclus van activiteiten doorgeven aan deReactInstanceManagerEnReactRootView:

@Overschrijven
beschermd leegte op pauze() {
 super.op pauze();

 als (mReactInstanceManager!= nul) {
mReactInstanceManager.opHostPauze(dit);
 }
}

@Overschrijven
beschermd leegte opHervatten() {
 super.opHervatten();

 als (mReactInstanceManager!= nul) {
mReactInstanceManager.opHostResume(dit, dit);
 }
}

@Overschrijven
beschermd leegte opVernietigen() {
 super.opVernietigen();

 als (mReactInstanceManager!= nul) {
mReactInstanceManager.opHostDestroy(dit);
 }
 als (mReactRootView!= nul) {
mReactRootView.unmountReactApplication();
 }
}

We moeten ook knopgebeurtenissen doorgeven aan React Native:

@Overschrijven
 openbaar leegte onBackPressed() {
 als (mReactInstanceManager!= nul) {
mReactInstanceManager.onBackPressed();
 } anders {
 super.onBackPressed();
 }
}

Hierdoor kan JavaScript bepalen wat er gebeurt wanneer de gebruiker op de hardware-terugknop drukt (bijvoorbeeld om navigatie te implementeren). Wanneer JavaScript het indrukken van de terugknop niet aankan, wordt uwberoepDefaultOnBackPressedmethode wordt genoemd. Standaard maakt dit je afActiviteit.

Ten slotte moeten we het ontwikkelaarsmenu aansluiten. Standaard wordt deze geactiveerd door (woede)schudden met het apparaat, maar in emulators is dit niet erg handig. Dus we zorgen ervoor dat het wordt weergegeven wanneer u op de hardwaremenuknop drukt (useCtrl+Mals u de Android Studio-emulator gebruikt):

@Overschrijven
openbaar booleaans opKeyUp(intsleutelcode, Sleutelmomentevenement) {
 als (sleutelcode== Sleutelmoment.KEYCODE_MENU&&mReactInstanceManager!= nul) {
mReactInstanceManager.showDevOptionsDialog();
 opbrengst WAAR;
 }
 opbrengst super.opKeyUp(sleutelcode,evenement);
}

Nu is uw activiteit klaar om wat JavaScript-code uit te voeren.

Test uw integratie​

Je hebt nu alle basisstappen uitgevoerd om React Native te integreren met je huidige applicatie. Nu gaan we beginnen met deMetro bundelaarom de te bouwenindex.bundelpakket en de server die op localhost draait om het te bedienen.

1. Voer het pakketprogramma uit​

Om uw app uit te voeren, moet u eerst de ontwikkelingsserver starten. Voer hiervoor de volgende opdracht uit in de hoofdmap van uw React Native-project:

$garenbegin

2. Voer de app uit​

Bouw en voer nu uw Android-app uit zoals normaal.

Zodra u uw door React aangedreven activiteit in de app bereikt, moet deze de JavaScript-code van de ontwikkelserver laden en weergeven:

Een release-build maken in Android Studio​

U kunt Android Studio ook gebruiken om uw release-builds te maken! Het is net zo snel als het maken van release-builds van uw eerder bestaande native Android-app. Er is nog een extra stap die u moet uitvoeren vóór elke release-build. U moet het volgende uitvoeren om een ​​React Native-bundel te maken, die wordt meegeleverd met uw native Android-app:

$ npx react-native bundel --platform android --devvals--entry-file index.js --bundel-uitvoer android/com/uw-bedrijfsnaam/app-pakketnaam/src/main/assets/index.android.bundle --assets-dest android/com/uw -bedrijfsnaam/app-pakketnaam/src/main/res/

Vergeet niet de paden te vervangen door de juiste en maak de activamap aan als deze niet bestaat.

Maak nu zoals gewoonlijk een release-build van uw native app vanuit Android Studio en u zou klaar moeten zijn om aan de slag te gaan!

Wat nu?​

Op dit punt kunt u uw app gewoon blijven ontwikkelen. Raadpleeg onzedebuggenEninzetdocs voor meer informatie over werken met React Native.