So führen Sie eine iOS-Anwendung über React Native aus

    Bild

    Dies ist eine Übersetzung des Originalartikels eines Programmierers, der unter dem Pseudonym Soujanya PS bloggt. Sie ist eine professionelle Person und möchte nicht nur Anwendungen und Dienste entwickeln, sondern auch Artikel darüber schreiben. Hier finden Sie eine Übersicht über das Starten einer iOS-Anwendung mit dem React Native-Framework.

    Vor nicht allzu langer Zeit begann ich mit React Native für iOS-Programme. Dies ist mein erstes tiefes Eintauchen in die native Anwendungsentwicklungsumgebung. Ich stelle fest, dass mich die Leichtigkeit des gesamten Prozesses sowie die Abstraktionsebene der React Native-Befehlszeilenschnittstelle überrascht hat. Das war einer der Faktoren, die mich veranlasst haben, über diesen Rahmen zu schreiben. Ich möchte meine eigenen Erfahrungen mit denen teilen, die gerade mit ihm gearbeitet haben.

    Skillbox empfiehlt: "Mobile PRO Developer" .
    Wir erinnern: für alle Leser von "Habr" - einen Rabatt von 10.000 Rubel, wenn Sie einen Skillbox-Kurs mit dem Aktionscode "Habr" schreiben.

    React Native bietet Befehlszeilentools zum Ausführen von iOS- und Android-Anwendungen auf Emulatoren und Geräten. Versuchen wir zu verstehen, was und wie man die React Native-Anwendung für iOS bereitstellt.

    Starten Sie tatsächlich


    React Native bietet ein hervorragendes Dienstprogramm namens init. Es stellt eine Anwendungsvorlage bereit und erstellt gleichzeitig relevante Xcode-Projektdateien im iOS-Ordner dieser Anwendung.

    Sie kann wiederum sowohl in der iOS-Emulator-Umgebung als auch auf dem Telefon / Tablet gestartet werden, indem Sie den folgenden Befehl im Stammverzeichnis der Anwendung

    eingeben : Reaktives Laufverhalten Der

    erfolgreiche Ausführung des Befehls folgt der Start der Anwendung im Emulator oder auf dem Gerät. Wir sagen, was wir dafür tun sollen.

    Führen Sie den Befehl ios aus


    React Native bietet dem Entwickler mehrere Befehlszeilenprogramme, mit denen Sie mit der Anwendung interagieren können. Sie befinden sich im local-cli-Ordner der React Native-Modulknoten. Run-ios ist eines der Dienstprogramme, die die in der Datei runIOS.js definierte runIOS () - Funktion ausführen.

    Run-ios kann Ihnen die folgenden Optionen verwenden:
    #Launch die die App auf einem bestimmten Simulator
    den React-native der run-of ios --simulator «das iPhone 5»

    #Pass , die die Nicht-Standard - Standort Das Verzeichnis von iOS
    des Reagieren-native der run-of ios --project-Pfad "./app/ios"

    #run auf einem angeschlossenen Gerät, das zum Beispiel das iPhone Max
    das Reagieren-native die run-of ios --device «Max iPhone»

    #Build die die App im Release - Modus
    die React-native die run-of ios --configuration die Release


    Geräte- / Emulatorauswahl


    Wenn das Gerät nicht festgelegt ist, startet run-ios standardmäßig den Debug-Modus der Anwendung im Emulator. Dies ist dank der Ausführung einer Reihe von xcrun / simctl-Befehlen möglich. Zuerst prüfen wir die Liste der verfügbaren Emulatoren, wählen einen davon aus und laden die Anwendung in ihrer Umgebung herunter.

    Wenn Sie die Anwendung auf einem physischen Gerät ausführen möchten, verbinden Sie sie einfach mit Ihrem Laptop und legen Sie die Details über run-ios fest.

    Im nächsten Schritt erstellen Sie ein Xcode-Anwendungsprojekt.

    Anwendungscode


    Normalerweise befindet sich das Xcode-Projekt der React Native-Anwendung im iOS-Ordner im Stammverzeichnis. Das xcode-Projekt wird mit dem Befehl xcodebuild erstellt. Alle zuvor für run-ios eingestellten Parameter werden an diesen Befehl übergeben.

    Nachdem das Projekt erstellt wurde, wird die Anwendung auf dem Emulator oder dem angeschlossenen Gerät installiert und gestartet.

    Anwendungscode im Debug-Modus hinzufügen


    Während des gesamten Entwicklungsprozesses lädt React Native Ihren Code dynamisch. Damit alles reibungslos funktioniert und der Code bei Bedarf verfügbar ist, benötigen Sie einen Server.

    Während das Xcode-Projekt gerade debuggt, wird der Metro-Server parallel dazu gestartet. Es wird von Anwendungen verwendet, die mit der Befehlszeilenschnittstelle React Native erstellt werden. All dies ermöglicht Ihnen die Beschleunigung und Vereinfachung des Prozesses mithilfe eines Hot-Boot-Verfahrens und anderer Methoden.

    Standardmäßig überwacht Metro Port 8081. Sobald die Anwendung im Emulator ausgeführt wird, wird eine Anforderung 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 alle erforderlichen Abhängigkeiten, sammelt den JavaScript-Code und sendet ihn an die Anwendung. Nach diesem Schritt sehen Sie die laufende Anwendung im Emulator oder auf einem angeschlossenen Gerät.

    Package JavaScript-Paket


    Im Release-Modus müssen Sie JavaScript vorab packen, indem Sie es in die Anwendung einfügen. Dies erfordert einige Änderungen, um sicherzustellen, dass das statische 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:@"index" fallbackResource:nil];
    #else
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
    #endif

    Dies ist nun ein Hinweis auf die Ressourcendatei main.bundle, die während der Verarbeitung des Xcode-Projekts aufgetaucht ist. In diesem Stadium wird das Script „rea-native-xcode.sh“ gestartet. Es befindet sich im Skriptordner des React Native-Moduls.

    Anwendung aus Xcode erstellen


    Sie können ein Xcode-Projekt direkt auf dem Mac erstellen, anstatt die React Native-CLI zu verwenden. Nach der Erstellung kann die Anwendung auch auf einem Emulator ausgeführt werden, der in den Xcode-Optionen ausgewählt ist, oder auf einem physischen Gerät.



    Ich hoffe, dass dieses Material Ihnen dabei geholfen hat, die Prozesse zu verstehen, die gestartet werden, wenn der Befehl zum Ausführen von reaktiver Ausführung ausgeführt wird. Dadurch wird Magie erzeugt und die Anwendung kann in der iOS-Umgebung ausgeführt werden.

    Skillbox empfiehlt:


    Jetzt auch beliebt: