de Soujanya PS

Cum să rulați o aplicație React Native pe iOS

Cum sa rulati o aplicatie React Native pe iOS

Recent am început să dezvolt o aplicație React-Native pe iOS. Aceasta a fost prima mea incursiune în dezvoltarea de aplicații native. Am fost surprins de ușurința și nivelul de abstractizare oferite de interfața liniei de comandă React-Native. De asemenea, am fost curios să înțeleg ce se întâmplă sub capotă atunci când React-Native rulează o aplicație pe un dispozitiv sau un simulator.

Am petrecut mult timp trecând prin codul relevant. Nu a existat niciun loc care să rezume ce face React-Native pentru ca aplicația să funcționeze. În parte, aceasta a fost motivația pentru a veni cu această piesă. Vreau să ajut orice altă persoană care începe din nou cu dezvoltarea aplicațiilor React-Native.

React-Native oferă utilități de linie de comandă pentru a rula o aplicație pe simulatoare / dispozitive iOS și Andriod. Fără alte întrebări, să încercăm să înțelegem ce și cum este procesul pentru a rula aplicațiile React-Native pe iOS.

În spatele scenelor

React-native oferă acest utilitar îngrijit numit init. Se creează un șablon de aplicație nativ pentru dvs. Acest șablon creează fișierele de proiect Xcode relevante în dosarul iOS al aplicației.

Aplicațiile React-Native pot fi lansate pe simulatoare / dispozitive fizice iOS executând următoarea comandă în folderul rădăcină al unei aplicații:

react-native run-ios

Executarea cu succes ar deschide aplicația pe un simulator sau pe un dispozitiv conectat. Pentru ca acest lucru să se întâmple, există o grămadă de pași care sunt executați atunci când executăm comanda de mai sus.

comanda run-ios

React-Native oferă o serie de utilități din linia de comandă pentru a lucra cu aplicația. Acestea pot fi găsite în local-cli folderul modulului nodului React-Native. run-ios este un astfel de utilitar care invocă runIOS() funcție definită în fișierul runIOS.js. run-ios acceptă anumite opțiuni precum:

#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

Selecție dispozitiv / simulator

Când nu este specificat niciun dispozitiv, run-ios ar lansa aplicația în modul Debug pe un simulator în mod implicit. Acest lucru se face executând o serie de xcrun simctl comenzi. Mai întâi vor verifica lista simulatoarelor disponibile pe Mac, ar alege unul dintre ele și apoi vor porni simulatorul selectat.

Alternativ, dacă doriți să rulați aplicația pe un dispozitiv fizic, conectați dispozitivul la Mac și apoi transmiteți detaliile dispozitivului la run-ios comanda.

Următorul pas este să construiți proiectul Xcode al aplicației.

Codul aplicației de construcție

De obicei, proiectul React-Native app Xcode poate fi găsit în folderul iOS prezent sub folderul rădăcină. Proiectul Xcode este construit folosind xcodebuild comanda. Orice opțiuni specificate run-ios cum ar fi configurația etc. sunt transmise acestei comenzi.

În mod implicit, proiectul Xcode este încorporat în schema de depanare. Odată ce proiectul este construit cu succes, aplicația este instalată și lansată pe simulator sau pe dispozitivul conectat.

Pachet de coduri de aplicații în modul de depanare

În timpul procesului de dezvoltare, React Native încarcă codul nostru JavaScript dinamic în timp de execuție. Pentru aceasta, avem nevoie de un server care să grupeze codul aplicației noastre și să îl furnizeze după cum este necesar.

În timp ce proiectul Xcode este construit în modul de depanare, o instanță de server Metro este, de asemenea, pornită în paralel. Metroul este pachetul folosit de aplicațiile create de interfața liniei de comandă React-Native (CLI). Este folosit pentru a grupa codul aplicației noastre în curs de dezvoltare. Acest lucru ne ajută cu o depanare mai rapidă și mai ușoară, permițând reîncărcarea la cald etc.

Serverul Metro este configurat să pornească în mod implicit pe portul 8081. Odată ce aplicația este lansată în simulator, este trimisă o cerere către server pentru pachet.

#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];

Apoi, serverul descarcă toate dependențele necesare, grupează codul aplicației JavaScript și îl trimite înapoi la aplicație. După acest pas, puteți vedea aplicația care funcționează pe simulator sau pe un dispozitiv conectat.

Pachet de coduri de aplicații în Modul de lansare – Pre-ambalarea pachetului JavaScript

În modul de lansare, trebuie să preambalăm pachetul JavaScript și să îl distribuim în aplicația noastră. Pentru a face acest lucru, este necesară o modificare a codului, astfel încât să știe să încarce pachetul static. În fișierul AppDelegate.m, modificați jsCodeLocation pentru a indica spre pachetul static dacă nu sunteți în modul de depanare.

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

Aceasta va face acum referire la main.bundle fișier resursă. Acest fișier este creat în timpul Bundle React Native code and images construiți Faza în Xcode. În această fază, react-native-xcode.sh scriptul este rulat care include codul aplicației JavaScript. Acest script poate fi găsit în folderul de scripturi al modulului nodului React-Native.

Construirea aplicației din Xcode

Alternativ, proiectul Xcode poate fi, de asemenea, construit în Xcode în Mac, în loc să utilizeze React-Native CLI. După ce ați terminat, aplicația poate fi lansată pe un simulator selectat din opțiunile Xcode sau pe un dispozitiv fizic conectat.

Cum sa rulati o aplicatie React Native pe iOS
Opțiuni din meniul Xcode pentru a construi aplicația și a o lansa pe un simulator

Sper că acest lucru v-a ajutat să înțelegeți diferiții pași care se întâmplă atunci când rulăm un simplu react-native run-ios comandă care afișează în mod magic o aplicație pe iOS.

Unele părți ale informațiilor furnizate aici au fost obținute de la React-Native Acasă pagină. Restul este un produs al meu căutând codul 🙂