Dies ist eine Übersetzung des ursprünglichen Blogger-Artikels unter dem Pseudonym Soujanya PS. Sie ist eine Fachfrau auf ihrem Gebiet und liebt es, Anwendungen und Dienste nicht nur zu entwickeln, sondern auch Artikel darüber zu schreiben. Hier ist ihr Bericht über das Starten einer iOS-Anwendung mit dem React Native-Framework.
Vor nicht allzu langer Zeit habe ich begonnen, React Native für iOS-Apps zu verwenden. Dies ist mein erster tiefer Einblick in eine native Anwendungsentwicklungsumgebung. Ich stelle fest, dass ich von der Leichtigkeit des gesamten Prozesses sowie der Abstraktionsebene, die die Befehlszeilenschnittstelle von React Native bietet, überrascht war. Tatsächlich war dies einer der Faktoren, die mich dazu veranlassten, über dieses Framework zu schreiben. Ich möchte meine eigenen Erfahrungen mit denen teilen, die gerade angefangen haben, mit ihm zu arbeiten.
Skillbox empfiehlt: "Mobile Developer PRO . "
Wir erinnern Sie daran: Für alle Leser von „Habr“ - ein Rabatt von 10.000 Rubel bei der Anmeldung für einen Skillbox-Kurs mit dem Promo-Code „Habr“.
React Native bietet Befehlszeilentools zum Ausführen von iOS- und Android-Anwendungen auf Emulatoren und Geräten. Versuchen wir zu verstehen, was und wie eine React Native-Anwendung für iOS bereitgestellt wird.
Eigentlich starten
React Native bietet ein hervorragendes Dienstprogramm namens init. Es bietet eine Anwendungsvorlage, während relevante Xcode-Projektdateien im iOS-Ordner dieser Anwendung erstellt werden.
Es kann wiederum sowohl in der iOS-Emulatorumgebung als auch auf dem Telefon / Tablet gestartet werden, indem der folgende Befehl im Stammordner der Anwendung eingegeben wird:
React-Native Run-IosDie erfolgreiche Ausführung des Befehls geht mit dem Start der Anwendung im Emulator oder auf dem Gerät einher. Wir sagen Ihnen, was dafür zu tun ist.
Run-ios-Befehl
React Native bietet dem Entwickler mehrere Befehlszeilenprogramme für die Interaktion mit der Anwendung. Sie befinden sich im Ordner local-cli der Knoten des React Native-Moduls. Run-ios ist eines der Dienstprogramme, mit denen die in der Datei runIOS.js definierte Funktion runIOS () ausgeführt wird.
Mit Run-ios können Sie die folgenden Optionen verwenden:
#Starten Sie die App auf einem bestimmten Simulator
React-Native Run-iOS - Simulator "iPhone 5"
# Übergeben Sie einen nicht standardmäßigen Speicherort des iOS-Verzeichnisses
reag-native run-ios --project-path "./app/ios"
#Laufen Sie auf einem angeschlossenen Gerät, z. B. dem iPhone von Max
React-Native Run-iOS - Gerät "Max's iPhone"
#Erstellen Sie die App im Release-Modus
reag-native run-ios --configuration ReleaseGeräte- / Emulatorauswahl
Wenn das Gerät nicht angegeben ist, startet run-ios den Debugging-Modus der Anwendung im Standardemulator. Dies ist dank einer Reihe von xcrun / simctl-Befehlen möglich. Überprüfen Sie zunächst die Liste der verfügbaren Emulatoren, wählen Sie einen aus und laden Sie die Anwendung in ihre Umgebung.
Wenn Sie die Anwendung auf einem physischen Gerät ausführen möchten, schließen Sie sie einfach an Ihren Laptop an und legen Sie die Details über run-ios fest.
Der nächste Schritt ist das Erstellen eines Xcode-Anwendungsprojekts.
Anwendungscode
In der Regel befindet sich das React Native Xcode-Anwendungsprojekt im iOS-Ordner im Stammverzeichnis. Ein Xcode-Projekt wird mit dem Befehl xcodebuild erstellt. Alle zuvor für run-ios festgelegten Parameter werden an diesen Befehl übergeben.
Sobald das Projekt erstellt wurde, wird die Anwendung auf dem Emulator oder dem angeschlossenen Gerät installiert und gestartet.
Hinzufügen von Anwendungscode im Debug-Modus
Während des gesamten Entwicklungsprozesses lädt React Native Ihren Code dynamisch. Damit alles reibungslos funktioniert und der Code nach Bedarf verfügbar ist, benötigen Sie einen Server.
Während das Xcode-Projekt debuggt, startet der Metro-Server parallel dazu. Es wird von Anwendungen verwendet, die über die React Native-Befehlszeilenschnittstelle erstellt werden. All dies ermöglicht es Ihnen, den Prozess mithilfe des "heißen" Neustarts und anderer Methoden zu beschleunigen und zu vereinfachen.
Standardmäßig überwacht Metro Port 8081. Sobald die Anwendung im Emulator gestartet wird, wird eine Anfrage an den Server gesendet.
#Code in AppDelegate.m sends the request for the bundle: #index.bundle to server jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MobileApp initialProperties:nil launchOptions:launchOptions];
Der Server lädt alle erforderlichen Abhängigkeiten, sammelt JavaScript-Code und sendet ihn an die Anwendung. Nach diesem Schritt sehen Sie die laufende Anwendung im Emulator oder auf dem angeschlossenen Gerät.
JavaScript-Paket
Im Release-Modus müssen Sie zuerst JavaScript packen und in die Anwendung einfügen. Dazu sind einige Änderungen erforderlich, damit ein statisches Paket heruntergeladen werden kann. Sie müssen jsCodeLocation in der Datei AppDelegate.m ändern und den Speicherort des statischen Pakets außerhalb des Debug-Modus angeben:
#ifdef DEBUG jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@ fallbackResource:nil]; #else jsCodeLocation = [[NSBundle mainBundle] URLForResource:@ withExtension:@]; #endif
Dies ist nun ein Hinweis auf die Ressourcendatei main.bundle, die während der Verarbeitung des Xcode-Projekts angezeigt wurde. In dieser Phase wird das Skript react-native-xcode.sh ausgeführt. Es befindet sich im Skriptordner des React Native-Moduls.
Erstellen einer Anwendung aus Xcode
Sie können ein Xcode-Projekt auch direkt auf dem Mac erstellen, anstatt die React Native CLI zu verwenden. Nach dem Erstellen der Anwendung können Sie sie auch auf dem in den Xcode-Optionen ausgewählten Emulator oder auf dem physischen Gerät ausführen.
Ich hoffe, dass dieses Material Ihnen geholfen hat, die Prozesse zu verstehen, die bei der Ausführung des reaktionsnativen Befehls run-ios beginnen. Dies erzeugt Magie und ermöglicht es Ihnen, die Anwendung in der iOS-Umgebung auszuführen.
Skillbox empfiehlt: