Das war eine Menge Einführung in React Native und Expo, aber ich finde es wichtig, dass Sie
verstehen, womit Sie arbeiten, bevor Sie anfangen.
Jetzt ist es an der Zeit, loszulegen und dafür die Expo zu besuchen. io. Dort können Sie auf Erste
Schritte klicken und die Startschritte finden Sie hier.
Jetzt brauchen Sie diesen ersten Schritt nicht wirklich,
wir können direkt zu Schritt Nummer zwei springen, nämlich, dass Sie NodeJS benötigen. Jetzt benötigen Sie NodeJS, eine Javascript-Laufzeit, mit der Sie
beispielsweise serverseitige Apps mit Javascript erstellen können. Sie brauchen das nicht, weil wir in
diesem Kurs NodeJS-Code schreiben werden. Es ist kein
Node-Kurs, keine
Sorge, Sie müssen
NodeJS nicht kennen, aber es ist ein Paket, mit dem wir Javascript auf unserem Computer ausführen können Zum Beispiel läuft
der Expo-Client hinter den Kulissen auch mit Javascript. Er hat
nichts mit React Native zu tun.
Nur damit dieses Tool richtig funktioniert.
Auch für diesen Befehl zum Installieren des Tools npm ist dies der Node Package
Manager, der auch von NodeJS zur Verfügung gestellt wird.
Der erste Schritt ist also, dass Sie nodejs besuchen. org und dort die neueste
Version herunterladen, in meinem Fall 12. 6 von dort aus, um loszulegen, und was auch immer Ihre
neueste Version ist, wenn Sie diese anzeigen, laden Sie einfach
diese Version herunter, installieren Sie sie. Sie erhalten ein normales Installationsprogramm, durch das Sie einfach gehen können, indem Sie alle
diese Schritte dort durchklicken.
Es ist für MacOS, Windows und Linux verfügbar.
Laden Sie es einfach hier herunter, gehen Sie durch das Installationsprogramm und sobald es installiert ist, können Sie hier mit
diesem dritten Schritt fortfahren.
Wenn NodeJS installiert ist, kopieren wir diesen Befehl hier und öffnen dann Ihr normales Terminal oder unter
Windows Ihre Eingabeaufforderung und fügen diesen Befehl hier ein.
Unter Mac und Linux müssen Sie möglicherweise ein Sudo hinzufügen. Unter Windows ist
dies nicht erforderlich, um die richtigen Berechtigungen zu erhalten.
Hier gebe ich es
ein, dann werden Sie möglicherweise aufgefordert, Ihr Passwort einzugeben. Geben Sie es einfach
ein, wenn dies der Fall ist. Jetzt wird die Expo-CLI installiert. Mit diesem Tool können wir
React Native-Projekte mithilfe von Expo global erstellen und verwalten auf Ihrem Computer, sodass Sie es von überall
auf Ihrem
Computer verwenden können, also von überall in Ihrem Terminal.
Warten wir also, bis diese Installation abgeschlossen ist.
Sie können alle Warnungen ignorieren, die möglicherweise dazwischen liegen, und ich bin zurück, sobald diese
Installation abgeschlossen ist.
Sie können solche Zwischenfehler hier übrigens auch ignorieren, solange der Gesamteindruck nicht mit einem Fehler abstürzt,
sondern am Ende mit einer Meldung wie
dieser endet, waren Sie erfolgreich.
Damit haben wir Expo CLI installiert. Der nächste Schritt ist das Erstellen unseres Projekts, also Schritt Nummer
vier hier.
Dazu führen wir expo init
und dann einen beliebigen Projektnamen Ihrer Wahl aus. Stellen Sie dazu zunächst sicher, dass Sie mit dem Befehl cd in den Ordner
hier auf Ihrem Computer navigieren, in dem Sie das Projekt erstellen möchten. Also habe ich das hier gemacht, ich bin in diesem
Ordner und jetzt kann ich expo init ausführen und ich werde diese rn-first-App benennen, weil es hier
doch unsere erste React Native App ist. Drücken Sie einfach die Eingabetaste, dieser Name liegt natürlich ganz
bei Ihnen, den Sie
hier haben. Dadurch wird an der Stelle, an der Sie diesen Befehl ausgeführt haben, ein neuer Ordner erstellt und
dort mit expo eine React Native-App eingerichtet.
Jetzt werden Sie wahrscheinlich gefragt, welche Vorlage Sie verwenden möchten, und
dort können Sie zunächst mit der leeren Vorlage fortfahren.
Stellen Sie sicher, dass Sie sich nicht für ein Minimum entscheiden, da dies ein Setup
ohne die
Expo-Umgebung mit allen praktischen Funktionen wäre.
Als nächstes werden Sie wahrscheinlich aufgefordert, einen Namen für Ihre App einzugeben, und ich gebe hier einfach rn-first-app ein.
Dies
ist am Ende der Name, der im Task-Umschalter Ihrer App auf dem Startbildschirm und angezeigt
wird bald.
Sie können die Schnecke so lassen, wie sie ist, und einfach
erneut die Eingabetaste drücken. Jetzt verwende ich auch Garn auf meiner Maschine, was eine Alternative zu npm ist. Möglicherweise werden Sie
nicht gefragt, ob Sie Garn verwenden
möchten, das völlig in Ordnung ist Wählen
Sie hier auch Nein, um npm zu verwenden. Daher wird jetzt dieser Projektordner erstellt, alle erforderlichen
Abhängigkeiten wie React und React Native installiert und uns ein React Native-Projekt gegeben, mit dem wir eine native App erstellen
können.
Warten wir also, bis dies abgeschlossen ist.
Sobald es fertig ist, sehen Sie hier die nächsten Anweisungen. Sie können mit dem Befehl cd in
den neu erstellten Ordner navigieren und dort einfach npm start ausführen. Npm start startet nun das Expo-Entwicklungstool,
die Expo-Entwicklungstools und eine neue Registerkarte sollten sich in Ihrem Browser öffnen.
Hier ist die Registerkarte, die geöffnet wurde. Wenn Sie hier Probleme haben, können Sie
diese vorerst ignorieren. Hier handelt es sich um das Expo-Entwicklungstool oder die Expo-Entwicklungstools, wie sie genannt werden.
Es ist ein Fenster, in dem Sie Ihre App auf verschiedenen verbundenen Geräten ausführen oder Simulatoren hinzufügen können. Im Allgemeinen können
Sie Teile Ihrer App verwalten. Hier sehen Sie einige Ausgaben Ihrer App, einige Warnungen, die Sie möglicherweise
erhalten, und dies ist sehr
praktisch Fenster zum Verwalten Ihrer App und zum Ausführen Ihrer App. Stellen Sie jetzt auch sicher, dass Sie
diesen Prozess hier in dem Terminal, in dem Sie npm start ausgeführt haben, laufen lassen.
Möglicherweise sehen Sie, dass es nicht beendet wurde. Sie sehen diese Eingabezeile nicht mehr, in der Sie
Befehle eingeben können. Stattdessen können Sie hier nicht eingeben oder einige der hier angezeigten Verknüpfungen drücken, aber nicht eingeben
neue Befehle.
Sie können diesen Prozess jederzeit beenden, indem Sie gleichzeitig die Steuerung und c drücken. Sie sollten diesen Prozess
jedoch so lange laufen lassen, wie Sie an Ihrem Projekt arbeiten.
Wenn Sie dann für den Tag fertig sind, können Sie ihn beenden und neu starten Da
dieser Prozess am nächsten Tag auch Ihren Code überwacht und wenn Sie etwas in Ihrem Code ändern
und diese Änderung speichern, wird dies automatisch gespeichert und auf Ihrem angeschlossenen Gerät veröffentlicht.
Aber wenn wir gerade davon sprechen, schließen wir das Gerät an. Der einfachste Weg, um loszulegen, ist
die Verwendung Ihres iPhone oder Android-Telefons, das Sie besitzen.
In meinem Fall ist es hier ein iPhone und hier ist mein echtes Telefon und ich bin im App Store. Jetzt ist es auf Deutsch, weil ich ein deutsches
Telefon habe, aber dies ist der normale App Store. Jetzt können Sie dort
in den Suchbereich gehen und nach Expo suchen. Sobald Sie dies getan haben, sollten Sie diesen Expo-Client hier finden und Sie
können ihn einfach auf Ihr Gerät herunterladen. Die Verwendung ist kostenlos. Installieren Sie es einfach auf Ihrem Gerät und warten Sie, bis
diese Installation abgeschlossen ist. Sobald
dies abgeschlossen ist, können Sie diese öffnen.
Wenn die Expo-App installiert ist, müssen Sie sich hier nicht anmelden. Stattdessen sollten Sie auf Android in der Lage sein um
diesen Barcode direkt aus Ihrer Expo-App heraus zu scannen. Öffnen Sie unter iOS einfach die Kamera-App
und gehen Sie dann auch zu den Entwicklertools hier. Dort sehen Sie den Barcode. Halten
Sie einfach Ihre Kamera auf iOS oder den Expo-App-Scanner hier auf Android und Sie sollten dazu aufgefordert werden ob du dann eine
app in expo öffnen willst. Klicken Sie einfach dort auf Öffnen und
jetzt sollte Ihre App hier im Expo-Client geöffnet werden, den Sie
installiert haben, ohne sich erneut anzumelden, indem Sie Ihre iPhone-Kamera über diesen Barcode halten oder auf Android, indem Sie dies
direkt in der Expo-App tun, in der Sie sich befinden diese Option dazu.
Jetzt wird das Javascript-Bundle erstellt, wie Sie hier unten sehen oder mit anderen Worten, dies
wird nun Ihre App nehmen und sie im Grunde kompilieren und vorbereiten und dann hier über die Server von expo in
Ihre App laden und Sie können einfach darauf klicken Habe es hier auf dem ersten Bildschirm und dann ist dies deine startende
React Native App.
Und jetzt sehen wir uns den Code dafür an und sehen, wie wir etwas im Code ändern können, um hier
auf diesem Bildschirm etwas anderes zu sehen.