So führen Sie eine React Native-App unter iOS aus

Ich habe kürzlich begonnen, eine React-Native-App für iOS zu entwickeln. Dies war mein erster Ausflug in die native App-Entwicklung. Ich war überrascht von der Leichtigkeit und dem Abstraktionsgrad der Befehlszeilenschnittstelle von React-Native. Ich war auch neugierig zu verstehen, was unter der Haube passiert, wenn React-Native eine App auf einem Gerät oder einem Simulator ausführt.

Ich habe viel Zeit damit verbracht, den entsprechenden Code durchzugehen. Es gab keinen Ort, an dem zusammengefasst wurde, was React-Native tut, um die App zum Laufen zu bringen. Teilweise war das die Motivation, dieses Stück zu entwickeln. Ich möchte jeder anderen Person helfen, die mit der Entwicklung der React-Native-App neu anfängt.

React-Native bietet Befehlszeilenprogramme zum Ausführen einer App auf iOS- und Andriod-Simulatoren / -Geräten. Versuchen wir ohne weiteres zu verstehen, wie und wie React-Native-Apps unter iOS ausgeführt werden.

Hinter den Kulissen

React-native bietet dieses nette Dienstprogramm namens init. Es erstellt eine native App-Vorlage für Sie. Diese Vorlage erstellt die relevanten Xcode-Projektdateien im iOS-Ordner der App.

React-Native-Apps können auf iOS-Simulatoren / physischen Geräten gestartet werden, indem der folgende Befehl im Stammordner einer App ausgeführt wird:

react-native run-ios

Eine erfolgreiche Ausführung würde die App auf einem Simulator oder einem angeschlossenen Gerät öffnen. Dazu gibt es eine Reihe von Schritten, die ausgeführt werden, wenn wir den obigen Befehl ausführen.

Befehl run-ios

React-Native bietet eine Reihe von Befehlszeilenprogrammen für die Arbeit mit der App. Diese finden Sie im Ordner local-cli des Knotenmoduls React-Native. run-ios ist ein solches Dienstprogramm, das die runIOS()in der Datei runIOS.js definierte Funktion aufruft. run-ios akzeptiert bestimmte Optionen wie:

#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

Geräte- / Simulatorauswahl

Wenn kein Gerät angegeben ist, wird run-iosdie App standardmäßig im Debug-Modus auf einem Simulator gestartet. Dies erfolgt durch Ausführen einer Reihe von xcrun simctlBefehlen. Sie überprüfen zuerst die Liste der verfügbaren Simulatoren auf dem Mac, wählen einen aus und starten dann den ausgewählten Simulator.

Wenn Sie die App auf einem physischen Gerät ausführen möchten, schließen Sie das Gerät an den Mac an und geben Sie die Gerätedetails an den run-iosBefehl weiter.

Der nächste Schritt besteht darin, das Xcode-Projekt der App zu erstellen.

App-Code erstellen

Normalerweise befindet sich das Xcode-Projekt der React-Native-App im iOS-Ordner unter dem Stammordner. Das Xcode-Projekt wird mit dem xcodebuildBefehl erstellt. Alle angegebenen Optionen run-ioswie die Konfiguration usw. werden an diesen Befehl übergeben.

Standardmäßig wird das Xcode-Projekt im Debug-Schema erstellt. Sobald das Projekt erfolgreich erstellt wurde, wird die App auf dem Simulator oder dem angeschlossenen Gerät installiert und gestartet.

App-Code-Bündelung im Debug-Modus

Während des Entwicklungsprozesses lädt React Native unseren JavaScript-Code zur Laufzeit dynamisch. Dazu benötigen wir einen Server, der unseren App-Code bündelt und nach Bedarf bereitstellt.

Während das Xcode-Projekt im Debug-Modus erstellt wird, wird parallel eine Instanz des Metro-Servers gestartet. Metro ist der Bundler, der von Apps verwendet wird, die von der React-Native-Befehlszeilenschnittstelle (CLI) erstellt wurden. Es wird verwendet, um unseren App-Code in der Entwicklung zu bündeln. Dies hilft uns beim schnelleren und einfacheren Debuggen, indem das Hot-Reloading usw. aktiviert wird.

Der Metro-Server ist standardmäßig so konfiguriert, dass er auf Port 8081 startet. Sobald die App im Simulator gestartet ist, wird eine Anfrage für das Bundle an den Server gesendet.

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

Der Server lädt dann alle erforderlichen Abhängigkeiten herunter, bündelt den JavaScript-App-Code und sendet ihn an die App zurück. Nach diesem Schritt können Sie sehen, wie die App auf dem Simulator oder einem angeschlossenen Gerät funktioniert.

App-Code-Bündelung im Release-Modus - Vorverpackung des JavaScript-Bundles

Im Release-Modus müssen wir das JavaScript-Bundle vorverpacken und in unserer App verteilen. Dazu ist eine Codeänderung erforderlich, damit das statische Bundle geladen werden kann. Ändern Sie in der Datei AppDelegate.m jsCodeLocation so, dass es auf das statische Bundle verweist, wenn Sie sich nicht im Debug-Modus befinden.

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

Dies verweist nun auf die main.bundleRessourcendatei. Diese Datei wird während der Bundle React Native code and imagesErstellungsphase in Xcode erstellt. Während dieser Phasereact-native-xcode.shSkript wird ausgeführtwelches den JavaScript-App-Code bündelt. Dieses Skript befindet sich im Skriptordner des React-Native-Knotenmoduls.

Erstellen der App aus Xcode

Alternativ kann das Xcode-Projekt auch in Xcode auf einem Mac erstellt werden, anstatt die React-Native-CLI zu verwenden. Anschließend kann die App auf einem Simulator gestartet werden, der aus den Xcode-Optionen ausgewählt wurde, oder auf einem angeschlossenen physischen Gerät.

Ich hoffe, dies hat Ihnen geholfen, die verschiedenen Schritte zu verstehen, die passieren, wenn wir einen einfachen react-native run-iosBefehl ausführen, der auf magische Weise eine App unter iOS aufruft.

Einige Teile der hier bereitgestellten Informationen stammen von der React-Native-Homepage. Der Rest ist ein Produkt von mir, das den Code herumschnüffelt :)