Was sind unsere Alternativen zum verwalteten Workflow?
Eine Alternative ist die Verwendung der React Native-CLI. Wenn Sie
diese besuchen, können Sie dies auf der offiziellen
React Native-Seite erfahren. Sie können einfach bei Google nach React Native suchen, um sie zu finden.
Wenn Sie auf Erste Schritte klicken, werden Sie tatsächlich begrüßt Zwei verschiedene Einstiegsmethoden und die vorausgewählten Möglichkeiten zur Verwendung der Expo-CLI.
Dies ist der
Ansatz, den wir verwendet haben, oder?
Das ist also nichts Besonderes. Sie erhalten eine React Native-App mit Expo. Dies haben wir
in diesem Kurs verwendet.
Sie können jedoch auch auf den Schnellstart von
React Native CLI klicken. Jetzt müssen Sie hier zunächst Ihr System auf eine bestimmte Weise
einrichten und dann ein separates Paket installieren, die React Native CLI, die Sie jetzt zum Erstellen eines
Projekts benötigen und es laufen zu lassen und so weiter. Jetzt finden Sie hier die detaillierten Installationsanweisungen für verschiedene Betriebssysteme und
Apps, die Sie erstellen möchten.
Beachten Sie jetzt, dass Sie unter Windows, wie hier angegeben, keine iOS-Apps erstellen können, genauso wie unter Linux.
Sie können dort nur Android-Apps erstellen und Installationsanweisungen finden, wenn Sie die spezifischen Optionen auswählen.
Unter macOS
können Sie iOS und Android erstellen und diese Installationsanweisungen befolgen.
Jetzt werde ich dies hier nicht im Detail tun, da Sie sie natürlich alle
hier finden, wenn
Sie mitmachen möchten. Am Ende müssen Sie ein paar Pakete installieren, nicht npm-Pakete, sondern systemweite Pakete und
die Der genaue Installationsprozess hängt davon ab, auf welcher Plattform Sie ausgeführt werden.
Sie müssen Android Studio oder Xcode installieren, also Xcode für iOS-Apps, Android Studio für Android-Apps und Sie müssen das
jetzt installieren, vorher war es optional, ich habe
es nur getan,
um einen Simulator zu bekommen, jetzt brauchen
Sie es, weil jetzt diese Tools werden verwendet, um Ihre App zu erstellen.
Bisher war dies nicht erforderlich, da der Expo-Wrapper unseren Code im Grunde genommen gelesen und gehostet hat und
Sie auch im verwalteten Workflow eine eigenständige App mit Expo erstellen können,
die in der Cloud ausgeführt wird.
Jetzt, da alles lokal abläuft, müssen Sie Android Studio usw. installieren und mit allen
Optionen installieren, die Sie hier finden.
Jetzt müssen Sie auch die React Native CLI installieren, unabhängig davon, für welche Plattform Sie arbeiten. Sie können dies
in Ihrer normalen Eingabeaufforderung oder Ihrem normalen Terminal tun. Unter Mac oder Linux müssen Sie möglicherweise sudo davor hinzufügen Wenn Sie die richtigen Berechtigungen
erhalten, wird die React Native-CLI jetzt global installiert. Dazu muss auch NodeJS installiert sein, da
hierfür npm verwendet wird, der Paketmanager des Knotens. Stellen Sie also sicher, dass Sie
auch über diese verfügen.
Jetzt, wo die React Native CLI
installiert ist, können wir ein Projekt ganz ohne Expo erstellen. Dazu erstelle ich ein brandneues
Projekt und wähle einen Ordner dafür aus, indem ich
react-native init und jetzt einen beliebigen Namen Ihrer Wahl
ausführe Beispiel RNWithoutExpo. Für den Namen ist es wichtig,
dass er so geschrieben ist, keine Bindestriche oder Unterstriche, sondern nur ein Wort.
RNWithoutExpo ist also der Name, den ich wählen werde. Dadurch wird jetzt ein brandneues React Native-Projekt mithilfe
der React Native-CLI an der Stelle erstellt, an der Sie diesen Befehl ausgeführt haben, und Sie erhalten diesen neuen
Ordner, der dieses neue React Native-Projekt enthält.
Jetzt wieder wichtig,
müssen Sie jetzt Android Studio und Xcode installiert und konfiguriert haben, wie in den offiziellen Dokumenten hier
erwähnt. Andernfalls
funktioniert das, was ich Ihnen zeigen möchte,
jetzt nicht mehr. Sie müssen es installieren, da diese Tools jetzt von genutzt werden die
React Native CLI zum Erstellen und Ausführen Ihrer App. Drehen Sie auch einige Emulatoren oder Simulatoren hoch. Dies können die gleichen
sein, die zuvor im Kurs verwendet wurden, aber Sie müssen diese ausführen, damit wir dort unsere React Native-App sehen können.
Warten wir nun, bis dieses Setup hier abgeschlossen ist. Sobald dies abgeschlossen ist und dieser Vorgang eine Weile dauern kann, können
Sie den Anweisungen hier folgen, um am Ende Ihre App auszuführen. Lassen Sie mich also hier in diesen neu erstellten
Ordner
navigieren und reaktionsnative Run-Ios ausführen, um ihn
beispielsweise auf dem iOS-Simulator auszuführen, den ich erhalten habe. Jetzt hinter den Kulissen wird Xcode verwendet, um diese App
zu
erstellen. Es wird keine Expo mehr verwendet. Sie können den Expo-Client hier deinstallieren. Sie können
die Expo-CLI von
Ihrem System deinstallieren. Dies nutzt Expo überhaupt nicht. Es wird nur Xcode dahinter verwendet die Szenen
zum Erstellen Ihrer App, also dieses native Apple-Entwicklungstool. Warten wir also, bis dieser Build abgeschlossen ist. Wenn Sie ihn
zum ersten Mal erstellen,
dauert dies etwas länger. Nachfolgende Neuerstellungen sind schneller. Warten wir also, bis dies beendet ist.
Während dieses Erstellungsprozesses wird eine neue Registerkarte oder ein neues Fenster in Ihrem Terminal geöffnet.
Lassen Sie diesen Prozess laufen und halten Sie den Erstellungsprozess natürlich weiter. Beenden
Sie dies
nicht. Lassen Sie also beide Prozesse hier und hier laufen Jetzt wird die App auf dem Simulator installiert. In diesem
Fall wird sie dort installiert. Wenn Sie ein echtes Gerät angeschlossen haben, wird sie dort installiert und die App
wird dort gestartet. Daher wurde hier
tatsächlich ein neuer Simulator für mich erstellt Egal, jetzt
wird die App hier in diesem Simulator gestartet. Beim ersten Start wird nun die
im Wesentlichen auf diesem Gerät erstellte App heruntergeladen, und Sie haben dort auch einige nette Entwicklungsfunktionen. Das Remote-Debugging kann aktiviert
werden. Sie haben also auch hier all diese netten Funktionen, die nicht exklusiv
für die Messe sind und dieser erste Start wird, wie erwähnt, etwas länger dauern.
Warten wir also, bis dieser Download hier abgeschlossen ist, damit die App gestartet wird und hier kommt sie. Nun, der genaue Startbildschirm, den Sie hier sehen, kann
sich im Laufe der Zeit
unterscheiden, da dies nur der Startcode ist, den Sie im Projekt erhalten,
den wir uns in einer Sekunde ansehen werden, aber dies ist jetzt die App, eine native
App ohne Ausstellung ansonsten gleich, läuft unter iOS. Wir können es auch auf Android ausführen und dafür kann dieser jetzt abgeschlossene Prozess
gelöscht werden. Der andere sollte weiter
ausgeführt werden. Dies ist Ihr Entwicklungsserver, der mit dem Gerät kommuniziert und auf Dateiänderungen achtet und neuen Code auf das
Gerät überträgt Also,
was Sie von der Messe wissen, das funktioniert auch hier. Lassen Sie also den anderen Prozess laufen,
aber jetzt können wir auch reaktionsnatives run-android ausführen, um auch die App für Android zu erstellen, und denselben Server nutzen, um
dann auch die Android-App zu erstellen und an den Android-Emulator zu senden und dies dann auch zu sehen.
Warten wir also, bis dies
abgeschlossen ist. Auch dieser erste Build wird länger dauern, nachfolgende Nachladevorgänge werden viel schneller sein.
Dieser Erstellungsprozess nutzt jetzt Android Studio, das Sie ebenfalls installiert und konfiguriert haben
müssen, wie in den offiziellen Dokumenten beschrieben. Daher funktioniert dies jetzt natürlich auch vollständig ohne
Expo. Es wird nur Android Studio verwendet.
Jetzt wird auch die Android-App hier auf meinem Android-Emulator gestartet, aber wie zuvor kann dieser erste Start eine kurze Zeit dauern. Jetzt
wird eine Verbindung zu diesem
Entwicklungsserver hergestellt, den Sie daher hier natürlich auch weiterhin ausführen
sollten, nicht nur während der Erstellung Dieses Bundle ist jedoch ständig verfügbar, sodass Sie bei Änderungen an
Ihren Dateien eine Live-Neuerstellung erhalten. Sobald dies erledigt ist, können Sie sehen, wie die fertige App auf
Android ausgeführt wird.
Schauen wir uns nun den Code an, der dafür verantwortlich
ist. Sieht das jetzt ganz anders aus als das, was wir bisher gesehen haben?
Dafür habe ich das Projekt hier erneut mit Visual Studio Code geladen, sodass das gleiche Setup wie
zuvor und das, was Sie sehen, etwas anders aussieht, aber meistens haben wir eine Reihe verschiedener Konfigurationsdateien, fair genug,
aber das ändert sich nicht wirklich die Art, wie wir unseren Code schreiben.
Sehr wichtig, wir haben einen Android- und einen iOS-Ordner,
das hatten wir
vorher nicht, diese Ordner und unter Windows übrigens Linux, Sie haben kein iOS, Sie haben nur
Android dort, aber diese Ordner enthalten die echte native App Projekte, die mit Hilfe von Android Studio
und Xcode erstellt wurden und in die Ihr Code so eingebaut ist,
dass Sie sagen könnten: React Native erledigt all das für Sie, den React Native CLI-Prozess, aber wenn
wir uns den konkreten Code im ansehen App. js file, genau das
haben wir in diesem Kurs verwendet, oder? Dort haben wir ein paar Importe und einige zusätzliche Links, die Ihnen hier
einige Warnungen bezüglich des Codestils zeigen.
Dies sind keine tatsächlichen Fehler, nur dass ich doppelte Anführungszeichen anstelle von einfachen Anführungszeichen
verwenden sollte. Ja, eine Empfehlung, die mir hier egal ist, aber wenn Sie sich ansehen,
was hier importiert wird, reagieren Sie, speichern Sie die Bereichsansicht, das Stylesheet und die Bildlaufansicht , view, text
- das sind alles Dinge, mit denen wir bereits gearbeitet haben, also haben wir die normalen Komponenten,
mit denen wir bereits gearbeitet haben, und natürlich tun wir das, weil das, was ich in diesem Kurs gesagt habe: React Native ist React Native, expo ist eine dünne
Hülle darum .
Wir schreiben den gleichen Code, wir verwenden die gleichen Komponenten, sie werden zu nativen Widgets kompiliert, die sich nicht ändern, wenn
wir expo verwenden. Der einzige Unterschied besteht
darin, dass wir mit expo nicht so viel einrichten müssen, den Build ist
ein bisschen schneller und das Hinzufügen nativer Module ist super einfach, das Testen auf realen Geräten ist super einfach, es ist
einfach einfacher, wir
erstellen die App auf die gleiche Weise und das können Sie auch hier sehen.
Stile werden auf die gleiche Weise wie Stylesheet eingerichtet. erstellen, das ist alles so,
wie wir es in diesem Kurs gemacht haben und das ist
wichtig für Sie.
Eine zusätzliche Sache, die Sie hier finden, ist der Index. js-Datei, das hatten
wir in expo nicht. Diese Art von ist die grundlegende Konfigurationsdatei, mit der Ihre App gestartet wird.
Man könnte sagen, dass diese App-Komponente auf dem Bildschirm gerendert wird. Das
hat expo in React für Sie getan Native Expo-App, aber ansonsten ist es wirklich genauso und Sie würden
eine App auf die gleiche Weise erstellen.