1 00:00:02,410 --> 00:00:05,440 Was sind unsere Alternativen zum verwalteten Workflow? 2 00:00:05,440 --> 00:00:08,450 Eine Alternative ist die Verwendung der React Native-CLI. Wenn Sie 3 00:00:08,470 --> 00:00:10,950 diese besuchen, können Sie dies auf der offiziellen 4 00:00:10,960 --> 00:00:15,430 React Native-Seite erfahren. Sie können einfach bei Google nach React Native suchen, um sie zu finden. 5 00:00:15,880 --> 00:00:22,120 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. 6 00:00:22,130 --> 00:00:23,080 Dies ist der 7 00:00:23,080 --> 00:00:24,960 Ansatz, den wir verwendet haben, oder? 8 00:00:24,970 --> 00:00:30,220 Das ist also nichts Besonderes. Sie erhalten eine React Native-App mit Expo. Dies haben wir 9 00:00:30,220 --> 00:00:31,720 in diesem Kurs verwendet. 10 00:00:31,750 --> 00:00:35,410 Sie können jedoch auch auf den Schnellstart von 11 00:00:35,410 --> 00:00:41,170 React Native CLI klicken. Jetzt müssen Sie hier zunächst Ihr System auf eine bestimmte Weise 12 00:00:41,170 --> 00:00:47,530 einrichten und dann ein separates Paket installieren, die React Native CLI, die Sie jetzt zum Erstellen eines 13 00:00:47,530 --> 00:00:55,060 Projekts benötigen und es laufen zu lassen und so weiter. Jetzt finden Sie hier die detaillierten Installationsanweisungen für verschiedene Betriebssysteme und 14 00:00:55,300 --> 00:00:57,070 Apps, die Sie erstellen möchten. 15 00:00:57,100 --> 00:01:02,680 Beachten Sie jetzt, dass Sie unter Windows, wie hier angegeben, keine iOS-Apps erstellen können, genauso wie unter Linux. 16 00:01:02,680 --> 00:01:07,870 Sie können dort nur Android-Apps erstellen und Installationsanweisungen finden, wenn Sie die spezifischen Optionen auswählen. 17 00:01:08,590 --> 00:01:09,730 Unter macOS 18 00:01:09,760 --> 00:01:14,170 können Sie iOS und Android erstellen und diese Installationsanweisungen befolgen. 19 00:01:14,170 --> 00:01:19,030 Jetzt werde ich dies hier nicht im Detail tun, da Sie sie natürlich alle 20 00:01:19,030 --> 00:01:20,110 hier finden, wenn 21 00:01:20,110 --> 00:01:25,960 Sie mitmachen möchten. Am Ende müssen Sie ein paar Pakete installieren, nicht npm-Pakete, sondern systemweite Pakete und 22 00:01:25,960 --> 00:01:30,490 die Der genaue Installationsprozess hängt davon ab, auf welcher Plattform Sie ausgeführt werden. 23 00:01:30,580 --> 00:01:36,670 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 24 00:01:36,670 --> 00:01:39,130 jetzt installieren, vorher war es optional, ich habe 25 00:01:39,160 --> 00:01:40,610 es nur getan, 26 00:01:40,630 --> 00:01:42,840 um einen Simulator zu bekommen, jetzt brauchen 27 00:01:42,850 --> 00:01:47,020 Sie es, weil jetzt diese Tools werden verwendet, um Ihre App zu erstellen. 28 00:01:47,080 --> 00:01:52,750 Bisher war dies nicht erforderlich, da der Expo-Wrapper unseren Code im Grunde genommen gelesen und gehostet hat und 29 00:01:52,750 --> 00:01:56,780 Sie auch im verwalteten Workflow eine eigenständige App mit Expo erstellen können, 30 00:01:56,810 --> 00:01:59,030 die in der Cloud ausgeführt wird. 31 00:01:59,320 --> 00:02:04,780 Jetzt, da alles lokal abläuft, müssen Sie Android Studio usw. installieren und mit allen 32 00:02:04,780 --> 00:02:07,540 Optionen installieren, die Sie hier finden. 33 00:02:07,550 --> 00:02:14,130 Jetzt müssen Sie auch die React Native CLI installieren, unabhängig davon, für welche Plattform Sie arbeiten. Sie können dies 34 00:02:14,140 --> 00:02:22,420 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 35 00:02:22,420 --> 00:02:27,670 erhalten, wird die React Native-CLI jetzt global installiert. Dazu muss auch NodeJS installiert sein, da 36 00:02:27,670 --> 00:02:32,860 hierfür npm verwendet wird, der Paketmanager des Knotens. Stellen Sie also sicher, dass Sie 37 00:02:32,860 --> 00:02:34,450 auch über diese verfügen. 38 00:02:35,540 --> 00:02:38,330 Jetzt, wo die React Native CLI 39 00:02:38,330 --> 00:02:44,990 installiert ist, können wir ein Projekt ganz ohne Expo erstellen. Dazu erstelle ich ein brandneues 40 00:02:44,990 --> 00:02:49,110 Projekt und wähle einen Ordner dafür aus, indem ich 41 00:02:49,130 --> 00:02:53,120 react-native init und jetzt einen beliebigen Namen Ihrer Wahl 42 00:02:56,120 --> 00:02:59,950 ausführe Beispiel RNWithoutExpo. Für den Namen ist es wichtig, 43 00:02:59,990 --> 00:03:03,380 dass er so geschrieben ist, keine Bindestriche oder Unterstriche, sondern nur ein Wort. 44 00:03:03,890 --> 00:03:08,780 RNWithoutExpo ist also der Name, den ich wählen werde. Dadurch wird jetzt ein brandneues React Native-Projekt mithilfe 45 00:03:08,810 --> 00:03:14,450 der React Native-CLI an der Stelle erstellt, an der Sie diesen Befehl ausgeführt haben, und Sie erhalten diesen neuen 46 00:03:14,450 --> 00:03:16,870 Ordner, der dieses neue React Native-Projekt enthält. 47 00:03:16,970 --> 00:03:18,260 Jetzt wieder wichtig, 48 00:03:18,260 --> 00:03:24,800 müssen Sie jetzt Android Studio und Xcode installiert und konfiguriert haben, wie in den offiziellen Dokumenten hier 49 00:03:24,800 --> 00:03:25,690 erwähnt. Andernfalls 50 00:03:25,700 --> 00:03:28,520 funktioniert das, was ich Ihnen zeigen möchte, 51 00:03:28,520 --> 00:03:34,100 jetzt nicht mehr. Sie müssen es installieren, da diese Tools jetzt von genutzt werden die 52 00:03:34,100 --> 00:03:40,820 React Native CLI zum Erstellen und Ausführen Ihrer App. Drehen Sie auch einige Emulatoren oder Simulatoren hoch. Dies können die gleichen 53 00:03:40,820 --> 00:03:46,060 sein, die zuvor im Kurs verwendet wurden, aber Sie müssen diese ausführen, damit wir dort unsere React Native-App sehen können. 54 00:03:46,560 --> 00:03:52,830 Warten wir nun, bis dieses Setup hier abgeschlossen ist. Sobald dies abgeschlossen ist und dieser Vorgang eine Weile dauern kann, können 55 00:03:52,860 --> 00:03:59,900 Sie den Anweisungen hier folgen, um am Ende Ihre App auszuführen. Lassen Sie mich also hier in diesen neu erstellten 56 00:03:59,900 --> 00:04:00,560 Ordner 57 00:04:01,640 --> 00:04:04,670 navigieren und reaktionsnative Run-Ios ausführen, um ihn 58 00:04:04,750 --> 00:04:12,260 beispielsweise auf dem iOS-Simulator auszuführen, den ich erhalten habe. Jetzt hinter den Kulissen wird Xcode verwendet, um diese App 59 00:04:12,260 --> 00:04:13,070 zu 60 00:04:13,070 --> 00:04:19,180 erstellen. Es wird keine Expo mehr verwendet. Sie können den Expo-Client hier deinstallieren. Sie können 61 00:04:19,220 --> 00:04:20,390 die Expo-CLI von 62 00:04:20,390 --> 00:04:26,510 Ihrem System deinstallieren. Dies nutzt Expo überhaupt nicht. Es wird nur Xcode dahinter verwendet die Szenen 63 00:04:26,540 --> 00:04:33,020 zum Erstellen Ihrer App, also dieses native Apple-Entwicklungstool. Warten wir also, bis dieser Build abgeschlossen ist. Wenn Sie ihn 64 00:04:33,020 --> 00:04:34,260 zum ersten Mal erstellen, 65 00:04:34,280 --> 00:04:38,960 dauert dies etwas länger. Nachfolgende Neuerstellungen sind schneller. Warten wir also, bis dies beendet ist. 66 00:04:39,870 --> 00:04:43,980 Während dieses Erstellungsprozesses wird eine neue Registerkarte oder ein neues Fenster in Ihrem Terminal geöffnet. 67 00:04:43,980 --> 00:04:47,430 Lassen Sie diesen Prozess laufen und halten Sie den Erstellungsprozess natürlich weiter. Beenden 68 00:04:47,430 --> 00:04:48,080 Sie dies 69 00:04:48,090 --> 00:04:53,610 nicht. Lassen Sie also beide Prozesse hier und hier laufen Jetzt wird die App auf dem Simulator installiert. In diesem 70 00:04:53,610 --> 00:04:58,650 Fall wird sie dort installiert. Wenn Sie ein echtes Gerät angeschlossen haben, wird sie dort installiert und die App 71 00:04:58,650 --> 00:05:00,490 wird dort gestartet. Daher wurde hier 72 00:05:00,580 --> 00:05:03,060 tatsächlich ein neuer Simulator für mich erstellt Egal, jetzt 73 00:05:03,090 --> 00:05:07,830 wird die App hier in diesem Simulator gestartet. Beim ersten Start wird nun die 74 00:05:07,830 --> 00:05:14,030 im Wesentlichen auf diesem Gerät erstellte App heruntergeladen, und Sie haben dort auch einige nette Entwicklungsfunktionen. Das Remote-Debugging kann aktiviert 75 00:05:14,030 --> 00:05:18,270 werden. Sie haben also auch hier all diese netten Funktionen, die nicht exklusiv 76 00:05:18,300 --> 00:05:22,750 für die Messe sind und dieser erste Start wird, wie erwähnt, etwas länger dauern. 77 00:05:22,770 --> 00:05:30,220 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 78 00:05:30,250 --> 00:05:32,410 sich im Laufe der Zeit 79 00:05:32,500 --> 00:05:37,450 unterscheiden, da dies nur der Startcode ist, den Sie im Projekt erhalten, 80 00:05:37,450 --> 00:05:43,990 den wir uns in einer Sekunde ansehen werden, aber dies ist jetzt die App, eine native 81 00:05:44,080 --> 00:05:50,740 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 82 00:05:50,740 --> 00:05:52,330 gelöscht werden. Der andere sollte weiter 83 00:05:52,330 --> 00:05:57,360 ausgeführt werden. Dies ist Ihr Entwicklungsserver, der mit dem Gerät kommuniziert und auf Dateiänderungen achtet und neuen Code auf das 84 00:05:57,360 --> 00:05:58,270 Gerät überträgt Also, 85 00:05:58,270 --> 00:06:03,250 was Sie von der Messe wissen, das funktioniert auch hier. Lassen Sie also den anderen Prozess laufen, 86 00:06:03,250 --> 00:06:10,300 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 87 00:06:10,300 --> 00:06:16,260 dann auch die Android-App zu erstellen und an den Android-Emulator zu senden und dies dann auch zu sehen. 88 00:06:16,270 --> 00:06:17,950 Warten wir also, bis dies 89 00:06:17,950 --> 00:06:22,850 abgeschlossen ist. Auch dieser erste Build wird länger dauern, nachfolgende Nachladevorgänge werden viel schneller sein. 90 00:06:22,930 --> 00:06:28,150 Dieser Erstellungsprozess nutzt jetzt Android Studio, das Sie ebenfalls installiert und konfiguriert haben 91 00:06:28,330 --> 00:06:34,130 müssen, wie in den offiziellen Dokumenten beschrieben. Daher funktioniert dies jetzt natürlich auch vollständig ohne 92 00:06:34,140 --> 00:06:37,190 Expo. Es wird nur Android Studio verwendet. 93 00:06:37,370 --> 00:06:44,030 Jetzt wird auch die Android-App hier auf meinem Android-Emulator gestartet, aber wie zuvor kann dieser erste Start eine kurze Zeit dauern. Jetzt 94 00:06:44,030 --> 00:06:45,470 wird eine Verbindung zu diesem 95 00:06:45,470 --> 00:06:48,600 Entwicklungsserver hergestellt, den Sie daher hier natürlich auch weiterhin ausführen 96 00:06:48,710 --> 00:06:53,900 sollten, nicht nur während der Erstellung Dieses Bundle ist jedoch ständig verfügbar, sodass Sie bei Änderungen an 97 00:06:53,900 --> 00:06:59,180 Ihren Dateien eine Live-Neuerstellung erhalten. Sobald dies erledigt ist, können Sie sehen, wie die fertige App auf 98 00:06:59,180 --> 00:07:00,530 Android ausgeführt wird. 99 00:07:00,530 --> 00:07:03,500 Schauen wir uns nun den Code an, der dafür verantwortlich 100 00:07:03,500 --> 00:07:07,420 ist. Sieht das jetzt ganz anders aus als das, was wir bisher gesehen haben? 101 00:07:07,550 --> 00:07:12,620 Dafür habe ich das Projekt hier erneut mit Visual Studio Code geladen, sodass das gleiche Setup wie 102 00:07:12,620 --> 00:07:18,140 zuvor und das, was Sie sehen, etwas anders aussieht, aber meistens haben wir eine Reihe verschiedener Konfigurationsdateien, fair genug, 103 00:07:18,140 --> 00:07:22,040 aber das ändert sich nicht wirklich die Art, wie wir unseren Code schreiben. 104 00:07:22,130 --> 00:07:24,960 Sehr wichtig, wir haben einen Android- und einen iOS-Ordner, 105 00:07:24,980 --> 00:07:26,320 das hatten wir 106 00:07:26,360 --> 00:07:31,270 vorher nicht, diese Ordner und unter Windows übrigens Linux, Sie haben kein iOS, Sie haben nur 107 00:07:31,460 --> 00:07:36,740 Android dort, aber diese Ordner enthalten die echte native App Projekte, die mit Hilfe von Android Studio 108 00:07:36,740 --> 00:07:40,570 und Xcode erstellt wurden und in die Ihr Code so eingebaut ist, 109 00:07:40,570 --> 00:07:45,710 dass Sie sagen könnten: React Native erledigt all das für Sie, den React Native CLI-Prozess, aber wenn 110 00:07:45,710 --> 00:07:51,230 wir uns den konkreten Code im ansehen App. js file, genau das 111 00:07:51,230 --> 00:07:58,430 haben wir in diesem Kurs verwendet, oder? Dort haben wir ein paar Importe und einige zusätzliche Links, die Ihnen hier 112 00:07:58,430 --> 00:08:00,180 einige Warnungen bezüglich des Codestils zeigen. 113 00:08:00,230 --> 00:08:04,160 Dies sind keine tatsächlichen Fehler, nur dass ich doppelte Anführungszeichen anstelle von einfachen Anführungszeichen 114 00:08:04,170 --> 00:08:08,570 verwenden sollte. Ja, eine Empfehlung, die mir hier egal ist, aber wenn Sie sich ansehen, 115 00:08:08,630 --> 00:08:13,560 was hier importiert wird, reagieren Sie, speichern Sie die Bereichsansicht, das Stylesheet und die Bildlaufansicht , view, text 116 00:08:13,700 --> 00:08:18,520 - das sind alles Dinge, mit denen wir bereits gearbeitet haben, also haben wir die normalen Komponenten, 117 00:08:18,710 --> 00:08:26,690 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 118 00:08:26,690 --> 00:08:27,780 Hülle darum . 119 00:08:27,860 --> 00:08:34,580 Wir schreiben den gleichen Code, wir verwenden die gleichen Komponenten, sie werden zu nativen Widgets kompiliert, die sich nicht ändern, wenn 120 00:08:34,580 --> 00:08:36,920 wir expo verwenden. Der einzige Unterschied besteht 121 00:08:36,920 --> 00:08:41,360 darin, dass wir mit expo nicht so viel einrichten müssen, den Build ist 122 00:08:41,390 --> 00:08:48,220 ein bisschen schneller und das Hinzufügen nativer Module ist super einfach, das Testen auf realen Geräten ist super einfach, es ist 123 00:08:48,230 --> 00:08:49,580 einfach einfacher, wir 124 00:08:49,580 --> 00:08:54,110 erstellen die App auf die gleiche Weise und das können Sie auch hier sehen. 125 00:08:54,110 --> 00:08:56,920 Stile werden auf die gleiche Weise wie Stylesheet eingerichtet. erstellen, das ist alles so, 126 00:08:56,990 --> 00:09:00,530 wie wir es in diesem Kurs gemacht haben und das ist 127 00:09:01,570 --> 00:09:02,960 wichtig für Sie. 128 00:09:03,020 --> 00:09:05,870 Eine zusätzliche Sache, die Sie hier finden, ist der Index. js-Datei, das hatten 129 00:09:05,870 --> 00:09:11,780 wir in expo nicht. Diese Art von ist die grundlegende Konfigurationsdatei, mit der Ihre App gestartet wird. 130 00:09:11,780 --> 00:09:16,150 Man könnte sagen, dass diese App-Komponente auf dem Bildschirm gerendert wird. Das 131 00:09:16,160 --> 00:09:22,160 hat expo in React für Sie getan Native Expo-App, aber ansonsten ist es wirklich genauso und Sie würden 132 00:09:22,160 --> 00:09:24,460 eine App auf die gleiche Weise erstellen.