Hvordan kjøre en React Native-app på iOS

Jeg begynte nylig å utvikle en React-Native-app på iOS. Dette var min første razzia for utvikling av innfødte apper. Jeg ble overrasket over hvor enkelt og abstraksjonsnivået React-Native har kommandolinjegrensesnittet. Jeg var også nysgjerrig på å forstå hva som skjer under panseret når React-Native kjører en app på en enhet eller en simulator.

Jeg brukte mye tid på å gå gjennom den aktuelle koden. Det var ikke noe sted som oppsummerte hva React-Native gjør for å få appen til å fungere. Dels var det motivasjonen for å komme med dette stykket. Jeg vil hjelpe alle andre som begynner på nytt med React-Native apputvikling.

React-Native tilbyr kommandolinjeverktøy for å kjøre en app på iOS og Andriod simulatorer / enheter. Uten videre, la oss prøve å forstå hva og hvordan prosessen for å kjøre React-Native apps på iOS.

Bak scenen

React-native gir dette pene verktøyet som heter init. Det oppretter en egen appmal for deg. Denne malen oppretter relevante Xcode-prosjektfiler under iOS-mappen til appen.

React-Native-apper kan lanseres på iOS-simulatorer / fysiske enheter ved å kjøre følgende kommando i rotmappen til en app:

react-native run-ios

Vellykket gjennomføring vil åpne appen på en simulator eller en tilkoblet enhet. For at dette skal skje, er det en rekke trinn som utføres når vi kjører kommandoen ovenfor.

run-ios-kommando

React-Native tilbyr en rekke kommandolinjeprogrammer for å jobbe med appen. Disse finner du under den lokale cli- mappen til React-Native node-modulen. run-ios er et slikt verktøy som påkaller runIOS()funksjonen som er definert i filen runIOS.js. run-ios godtar visse alternativer 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 av enhet / simulator

Når ingen enhet er spesifisert, run-iosvil appen starte i feilsøkingsmodus på en simulator som standard. Dette gjøres ved å utføre en rekke xcrun simctlkommandoer. De ville først sjekke listen over tilgjengelige simulatorer på Mac, velge en blant dem og deretter starte den valgte simulatoren.

Alternativt, hvis du ønsker å kjøre appen på en fysisk enhet, kobler du enheten til Mac-en og sender deretter enhetsopplysningene til run-ioskommandoen.

Det neste trinnet er å bygge Xcode-prosjektet til appen.

Bygg app-kode

Vanligvis kan React-Native-appen Xcode-prosjektet bli funnet i iOS-mappen som er tilstede under rotmappen. Xcode-prosjektet er bygget ved hjelp av xcodebuildkommandoen. Eventuelle alternativer som er spesifisert til, run-iosfor eksempel konfigurasjonen osv., Blir gitt videre til denne kommandoen.

Som standard er Xcode-prosjektet innebygd i feilsøkingsskjemaet. Når prosjektet er vellykket bygget, installeres appen og lanseres på simulatoren eller den tilkoblede enheten.

Appkodebunting i feilsøkingsmodus

Under utviklingsprosessen laster React Native JavaScript-koden vår dynamisk ved kjøretid. For dette trenger vi en server for å pakke appkoden vår og gi den etter behov.

Mens Xcode-prosjektet bygges i feilsøkingsmodus, startes også en forekomst av Metro-server parallelt. Metro er pakkeren som brukes av apper opprettet av React-Native kommandolinjegrensesnitt (CLI). Den brukes til å pakke appkoden vår under utvikling. Dette hjelper oss med raskere og enklere feilsøking ved å muliggjøre varm omlasting etc.

Metro-serveren er konfigurert til å starte på port 8081 som standard. Når appen er lansert i simulatoren, sendes en forespørsel 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 laster deretter ned alle nødvendige avhengigheter, pakker JavaScript-appkoden og sender den tilbake til appen. Etter dette trinnet kan du se at appen fungerer på simulatoren eller en tilkoblet enhet.

Appkodebunting i utgivelsesmodus - Forpakking av JavaScript-pakken

I utgivelsesmodus må vi forhåndspakke JavaScript-pakken og distribuere den i appen vår. Å gjøre dette krever en kodeendring slik at den vet å laste den statiske bunten. I filen AppDelegate.m kan du endre jsCodeLocation for å peke på den statiske bunten hvis du ikke er i feilsøkingsmodus.

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

Dette vil nå referere til main.bundleressursfilen. Denne filen opprettes under Bundle React Native code and imagesbyggefasen i Xcode. I løpet av denne fasen,react-native-xcode.shskriptet kjøressom pakker JavaScript-appkoden. Dette skriptet finner du under skriptmappen til React-Native node-modulen.

Bygger appen fra Xcode

Alternativt kan Xcode-prosjektet også bygges i Xcode i Mac i stedet for å bruke React-Native CLI. Når du er ferdig, kan appen lanseres på en simulator valgt fra Xcode-alternativene eller på en tilkoblet fysisk enhet.

Jeg håper dette hjalp deg med å forstå de forskjellige trinnene som skjer når vi kjører en enkel react-native run-ioskommando som magisk henter opp en app på iOS.

Noen deler av informasjonen som er gitt her, er hentet fra hjemmesiden React-Native. Resten er et produkt av at jeg snek meg rundt koden :)