Sådan køres en React Native-app på iOS

Jeg startede for nylig med at udvikle en React-Native-app på iOS. Dette var min første strejf i udviklingen af ​​native apps. Jeg blev overrasket over den lette og abstraktionsniveau, der leveres af React-Native's kommandolinjegrænseflade. Jeg var også nysgerrig efter at forstå, hvad der sker under emhætten, når React-Native kører en app på en enhed eller en simulator.

Jeg brugte meget tid på at gennemgå den relevante kode. Der var ikke et sted, der opsummerede, hvad React-Native gør for at få appen til at fungere. Dels var det motivationen til at komme med dette stykke. Jeg vil gerne hjælpe enhver anden person, der starter forfra med React-Native app-udvikling.

React-Native giver kommandolinjeværktøjer til at køre en app på iOS- og Andriod-simulatorer / enheder. Uden yderligere ado, lad os prøve at forstå hvad og hvordan processen med at køre React-Native apps på iOS.

Bag scenen

React-native giver dette pæne værktøj kaldet init. Det opretter en native app-skabelon til dig. Denne skabelon opretter de relevante Xcode-projektfiler under iOS-mappen i appen.

React-Native apps kan startes på iOS-simulatorer / fysiske enheder ved at køre følgende kommando i rodmappen i en app:

react-native run-ios

En vellykket udførelse åbner appen på en simulator eller en tilsluttet enhed. For at dette kan ske, er der en masse trin, der udføres, når vi kører ovenstående kommando.

run-ios-kommando

React-Native giver et antal kommandolinjeværktøjer til at arbejde med appen. Disse kan findes under den lokale cli- mappe i React-Native node-modulet. run-ios er et sådant værktøj, der påkalder den runIOS()funktion, der er defineret i runIOS.js-filen. run-ios accepterer visse indstillinger såsom:

#Launch the app on a specific simulatorreact-native run-ios --simulator "iPhone 5"
#Pass a non-standard location of iOS directoryreact-native run-ios --project-path "./app/ios"
#Run on a connected device, e.g. Max's iPhonereact-native run-ios --device "Max\'s iPhone"
#Build the app in Release modereact-native run-ios --configuration Release

Valg af enhed / simulator

Når der ikke er angivet nogen enhed, run-iosstarter appen som standard i fejlretningstilstand på en simulator. Dette gøres ved at udføre en række xcrun simctlkommandoer. De tjekker først listen over tilgængelige simulatorer på Mac, vælger en blandt dem og starter derefter den valgte simulator.

Alternativt, hvis du ønsker at køre appen på en fysisk enhed, skal du slutte enheden til Mac og derefter videregive enhedsoplysningerne til run-ioskommandoen.

Det næste trin er at opbygge Xcode-projektet i appen.

Bygge app-kode

Normalt kan React-Native app Xcode-projektet findes i den iOS-mappe, der er til stede under rodmappen. Xcode-projektet er bygget ved hjælp af xcodebuildkommandoen. Alle indstillinger, der er specificeret til, run-iossåsom konfiguration osv., Videregives til denne kommando.

Xcode-projektet er som standard indbygget i debug-skema. Når projektet er bygget med succes, installeres og startes appen på simulatoren eller den tilsluttede enhed.

Appkodebundning i fejlretningstilstand

Under udviklingsprocessen indlæser React Native vores JavaScript-kode dynamisk ved kørsel. Til dette har vi brug for en server til at samle vores appkode og levere den efter behov.

Mens Xcode-projektet bygges i fejlretningstilstand, startes en forekomst af Metro-server også parallelt. Metro er bundler, der bruges af apps oprettet af CLI (React-Native command line interface). Det bruges til at samle vores app-kode under udvikling. Dette hjælper os med hurtigere og lettere fejlfinding ved at aktivere hot genindlæsning osv.

Metro-server er konfigureret til at starte på port 8081 som standard. Når appen er startet i simulatoren, sendes en anmodning til serveren om pakken.

#Code in AppDelegate.m sends the request for the bundle: #index.bundle to serverjsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MobileApp initialProperties:nil launchOptions:launchOptions];

Serveren downloader derefter alle de nødvendige afhængigheder, bundter JavaScript-appkoden og sender den tilbage til appen. Efter dette trin kan du se, at appen fungerer på simulatoren eller en tilsluttet enhed.

Appkodebundning i frigivelsestilstand - Forpakning af JavaScript-pakken

I frigivelsestilstand er vi nødt til at pakke JavaScript-pakken på forhånd og distribuere den i vores app. At gøre dette kræver en kodeændring, så den ved at indlæse den statiske pakke. I filen AppDelegate.m skal du ændre jsCodeLocation for at pege på den statiske pakke, hvis du ikke er i fejlfindingstilstand.

#ifdef DEBUGjsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#elsejsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

Dette refererer nu til main.bundleressourcefilen. Denne fil oprettes under Bundle React Native code and imagesbyggefasen i Xcode. I denne fasereact-native-xcode.shscript køressom bundter JavaScript-appkoden. Dette script kan findes under React-Native node-modulets scriptsmappe.

Bygge appen fra Xcode

Alternativt kan Xcode-projektet også bygges inden for Xcode i Mac i stedet for at bruge React-Native CLI. Når det er gjort, kan appen startes på en simulator valgt blandt Xcode-indstillingerne eller på en tilsluttet fysisk enhed.

Jeg håber, dette hjalp dig med at forstå de forskellige trin, der sker, når vi kører en simpel react-native run-ioskommando, der magisk henter en app på iOS.

Nogle dele af oplysningerne her er hentet fra hjemmesiden React-Native. Resten er et produkt af mig, der snuger rundt koden :)