1 00:00:02,230 --> 00:00:08,830 Neben dem Einrichten eines neuen Projekts von Grund auf mit React Native CLI oder mit der Expo-CLI und der 2 00:00:08,860 --> 00:00:10,820 anschließenden Auswahl des nackten Workflows 3 00:00:11,020 --> 00:00:19,710 können Sie jetzt sogar ein verwaltetes Projekt in ein nacktes Workflow-Projekt von React Native konvertieren. Das ist ziemlich cool, denn das bedeutet, dass Sie alles 4 00:00:19,900 --> 00:00:24,480 bekommen können Die praktischen Funktionen des verwalteten Workflows während der Entwicklung und wenn 5 00:00:24,490 --> 00:00:32,170 Sie beispielsweise fertig sind oder wenn Sie ein bestimmtes Paket eines Drittanbieters benötigen, das einige Funktionen integriert, die Sie nicht in die Ausstellung 6 00:00:32,230 --> 00:00:38,110 integriert haben und die Sie in einem solchen Fall unbedingt benötigen Wechseln Sie immer noch und Sie 7 00:00:38,110 --> 00:00:43,180 müssen die App nicht von Grund auf neu erstellen und ein brandneues Projekt erstellen und 8 00:00:43,180 --> 00:00:44,890 über Ihren Code kopieren. 9 00:00:45,010 --> 00:00:51,380 Wie? Nun, in Ihrem Projekt und dies ist die 10 00:00:51,380 --> 00:00:57,520 native Gerätefunktion, das großartige Ortsprojekt, das wir früher im Kurs erstellt haben, wo wir Orte hinzufügen können, 11 00:00:57,520 --> 00:01:05,230 wo wir natürlich den Standort, Karten, die Kamera, SQLite verwenden, wo wir all diese verwenden In diesem Projekt können Sie einfach 12 00:01:05,230 --> 00:01:10,390 expo eject ausführen. Dadurch wird Ihr Projekt in ein nicht expo-verwaltetes Workflow-Projekt umgewandelt. 13 00:01:10,390 --> 00:01:13,110 Wichtig ist jedoch, dass es kein Zurück gibt. Natürlich 14 00:01:13,110 --> 00:01:18,550 können Sie Ihren Ordner kopieren und eine Sicherungskopie erstellen und diese speichern. Wenn Sie git verwenden, können Sie natürlich zu 15 00:01:18,550 --> 00:01:23,860 einem früheren Commit zurückkehren, aber wenn Sie Ihren nicht gespeichert haben Wenn Sie das Projekt einmal ausgeworfen haben, können 16 00:01:23,860 --> 00:01:25,360 Sie es nicht mehr 17 00:01:25,360 --> 00:01:26,900 umwandeln. Seien Sie sich dessen bewusst. 18 00:01:27,160 --> 00:01:32,680 Sie müssten ein brandneues, von der Messe verwaltetes Projekt erstellen und Ihren gesamten Code kopieren, wenn 19 00:01:32,680 --> 00:01:33,970 Sie zurückkehren möchten. 20 00:01:33,970 --> 00:01:40,720 Wenn Sie also expo eject ausführen, sollten Sie tatsächlich gefragt werden, zu welcher Art von Projekt Sie auswerfen möchten, und 21 00:01:40,750 --> 00:01:46,180 hier habe ich am Ende zwei Optionen. Die Optionen, die Sie hier übrigens sehen, können sich im Laufe der 22 00:01:46,210 --> 00:01:52,360 Zeit unterscheiden, aber hier sind die beiden Optionen, die ich habe, Bare und Expo-Kit. Das Expo-Kit ist veraltet. Dies ist im 23 00:01:52,360 --> 00:01:58,780 Grunde das, was wir hatten, bevor wir den nackten Workflow hatten. Sie sollten also nicht wirklich zu 24 00:01:58,780 --> 00:02:02,520 diesem wechseln. Stattdessen können Sie hier zu nackt wechseln, was 25 00:02:02,530 --> 00:02:08,710 einfach bedeutet, dass dies jetzt in ein React Native-Projekt umgewandelt wird. Als ob es mit der 26 00:02:08,710 --> 00:02:13,010 React Native CLI ohne den Expo-Wrapper erstellt würde, aber es wird 27 00:02:13,030 --> 00:02:18,640 wie hier auf der Seite "React-Native-Unimodules" vorkonfiguriert. Dies ist eine Art Paket, das Expo benötigt, 28 00:02:18,670 --> 00:02:26,200 um alle diese Expo-APIs für a verfügbar zu machen Nicht-Expo-App. So werden all diese Dinge bei jeder Aktion vorkonfiguriert, 29 00:02:26,200 --> 00:02:29,140 sodass Sie dies nicht tun müssen, 30 00:02:29,350 --> 00:02:36,120 sodass Sie sozusagen eine React Native plus-App erhalten. Wenn ich hier die Eingabetaste drücke und jetzt wichtig, 31 00:02:36,120 --> 00:02:42,310 können Sie nicht mehr zurückkehren, sobald dies abgeschlossen ist. Sie können einen Namen für den Startbildschirm auswählen und 32 00:02:42,910 --> 00:02:50,490 ich werde hier großartige Orte auswählen, z. B. die Eingabetaste drücken und jetzt mein Android Studio und meinen Xcode benennen Projekte rn-guide, 33 00:02:50,530 --> 00:02:54,670 aber das liegt bei Ihnen und jetzt wird dies seinen Job machen. 34 00:02:54,880 --> 00:02:56,280 Es transformiert das Projekt, fügt einen 35 00:02:56,290 --> 00:03:02,380 Android-Ordner hinzu und da ich unter macOS bin, fügt es auch einen iOS-Ordner hinzu. Unter Windows und Linux ist dies natürlich 36 00:03:02,380 --> 00:03:06,970 nicht möglich, da dort, da Sie dies jetzt lokal erstellen müssen, 37 00:03:06,970 --> 00:03:08,660 keine iOS-Apps erstellt 38 00:03:09,640 --> 00:03:16,450 werden können und alles vorkonfiguriert und einige Abhängigkeiten installiert werden, sodass Sie Ihren vorhandenen Code verwenden 39 00:03:16,450 --> 00:03:22,150 können und alle Expo-Pakete, die Sie bereits in diesem nackten Setup installiert haben, so 40 00:03:22,150 --> 00:03:25,130 dass hier nicht nur alle Unimodule eingerichtet 41 00:03:25,240 --> 00:03:32,710 werden, sondern auch sichergestellt wird, dass alle Pakete, die Sie bereits verwenden, wie Expo Location oder Expo SQLite, 42 00:03:33,130 --> 00:03:37,980 auch diese Pakete enthalten Arbeit. Nun kann dies eine Weile dauern, 43 00:03:38,010 --> 00:03:46,260 also warten wir, bis dies abgeschlossen ist, und hier ist es erledigt, und Sie sehen, es sagt mir tatsächlich, dass es im Allgemeinen seine 44 00:03:46,260 --> 00:03:50,430 Arbeit erledigt hat, aber es gab zwei Pakete, die eine manuelle Einrichtung erfordern. 45 00:03:50,430 --> 00:03:54,750 Sie können einfach auf diese Links klicken, um Anweisungen zu erhalten, was Sie dort 46 00:03:54,780 --> 00:04:00,810 tun müssen. Es ist die Expo-Bildauswahl und das React Native-Kartenpaket, in dem Sie eine manuelle Installation durchführen müssen, um 47 00:04:00,810 --> 00:04:01,980 den Vorgang abzuschließen. 48 00:04:02,820 --> 00:04:05,010 Hier auf der Expo 49 00:04:05,010 --> 00:04:11,810 Image Picker-Seite müssen wir am Ende die Port-Installation im iOS-Ordner ausführen, also müssen wir alle 50 00:04:11,820 --> 00:04:18,660 Dinge nach der Installation des Pakets erledigen. Im Projektordner navigiere ich zu iOS und führe die 51 00:04:18,660 --> 00:04:24,930 Portinstallation aus. Port ist wie npm für iOS. Es installiert einige Abhängigkeiten, die iOS benötigt, um korrekt 52 00:04:25,050 --> 00:04:32,040 zu funktionieren. Das passiert also jetzt und sobald dies erledigt ist, werden wir es auch tun Ich muss diesen 53 00:04:32,040 --> 00:04:36,030 Eintrag hier zum Android-Manifest hinzufügen, also müssen wir das auch tun. 54 00:04:36,270 --> 00:04:42,030 Wir müssen also zum Android-Ordner, dem dortigen App-Ordner und im Quellordner, dem AndroidManifest, gehen 55 00:04:42,360 --> 00:04:47,070 und dies dann, wie hier beschrieben, in die Anwendungs-Tags einfügen. 56 00:04:47,070 --> 00:04:57,060 Hier ist also die Anwendung und dort sollten wir diesen Aktivitätseintrag hier hinzufügen, so ist dies erforderlich. 57 00:04:57,300 --> 00:05:02,280 Jetzt, wo ich schon hier bin, werden Sie auch sehen, dass diese Manifestdatei auch auf eine 58 00:05:02,280 --> 00:05:02,950 bestimmte 59 00:05:03,090 --> 00:05:08,940 Weise eingerichtet wurde, sie enthält alle Berechtigungen und natürlich möchten Sie das nicht tun, Sie möchten nur nach den 60 00:05:08,940 --> 00:05:10,390 Berechtigungen fragen du brauchst wirklich. 61 00:05:10,410 --> 00:05:18,480 Entfernen Sie also, wie hier angegeben, alle Berechtigungen, die Ihre App nicht benötigt, und zum Beispiel sollte meine Demo-Anwendung hier 62 00:05:18,480 --> 00:05:24,300 nur die Zugriffsberechtigung zum Suchen des Standorts benötigen, die ich dort nach oben verschieben 63 00:05:27,440 --> 00:05:36,890 werde, und natürlich die Berechtigung zur Kamera, die ich dort nach oben verschieben werde und auch die Schreibrechte für externen Speicher, die ebenfalls 64 00:05:41,790 --> 00:05:43,520 erforderlich sein sollten. 65 00:05:43,530 --> 00:05:48,900 Dies sollten eigentlich alle Berechtigungen sein, und Sie können alle Pakete von Drittanbietern oder 66 00:05:48,900 --> 00:05:54,110 alle von Ihnen verwendeten Expo-API-Pakete überprüfen, um sicherzustellen, dass Sie keine Berechtigungen verpassen. 67 00:05:54,300 --> 00:06:00,840 Damit werde ich tatsächlich alle diese Berechtigungen hier und auch alle diese Berechtigungen auskommentieren und wir werden es 68 00:06:00,840 --> 00:06:09,170 testen, um zu sehen, ob das funktioniert. Damit ist das Einrichten des Bildauswahlpakets abgeschlossen. Jetzt muss auch React Native 69 00:06:09,190 --> 00:06:14,880 Maps konfiguriert werden und dort können wir in die Installationsanweisungen eintauchen. 70 00:06:14,880 --> 00:06:18,260 Nun, dieser Befehl zur Installation von npm, der bereits ausgeführt wurde, aber 71 00:06:18,390 --> 00:06:24,960 jetzt müssen wir React Native Link React Native Maps ausführen. Gehen wir also einfach eine Ebene 72 00:06:25,020 --> 00:06:32,380 zurück in den Stammprojektordner und führen React Native Link React Native Maps aus. Dadurch 73 00:06:32,380 --> 00:06:34,590 wird nun alles 74 00:06:34,600 --> 00:06:40,870 verknüpft. Stellen Sie sicher, dass alles korrekt funktioniert, dass alles korrekt konfiguriert 75 00:06:40,870 --> 00:06:49,120 ist und Sie noch einige manuelle Schritte ausführen müssen Zeug, all diese Dinge hier sollten 76 00:06:49,270 --> 00:07:00,230 nicht erforderlich sein, das sollte alles mit dem Verknüpfen geschehen, aber unter Android müssen Sie sicherstellen, dass Sie diesen Eintrag 77 00:07:00,230 --> 00:07:05,520 hier, diesen Metadateneintrag, in Ihren Anwendungsschlüssel im AndroidManifest einfügen. 78 00:07:05,630 --> 00:07:11,990 Hier in der Anwendung können wir diesen Eintrag hinzufügen und dort müssen Sie Ihren Google Maps-API-Schlüssel 79 00:07:11,990 --> 00:07:12,740 platzieren. 80 00:07:12,840 --> 00:07:14,680 Wenn Sie sich erinnern, habe 81 00:07:14,690 --> 00:07:21,230 ich das jetzt im env-Ordner. Ich greife einfach nach diesem Schlüssel und füge ihn hier hinzu. Ersetzen Sie hier 82 00:07:21,230 --> 00:07:23,490 Ihren Google Maps API-Schlüssel durch diesen Schlüssel. 83 00:07:23,660 --> 00:07:31,040 Außerdem ist es wichtig, dass Sie zur Google Maps API-Seite wechseln Um dieses Karten-SDK für Android für Ihr Projekt zu aktivieren, 84 00:07:31,040 --> 00:07:31,790 ist 85 00:07:31,790 --> 00:07:36,500 dies wichtig, da dies sonst nicht funktioniert. Für iOS müssen Sie nichts Besonderes tun, es sei 86 00:07:36,500 --> 00:07:41,690 denn, Sie möchten dort Google Maps verwenden. In diesem Fall müssen Sie die Anweisungen in den Anweisungen zu React Native Maps hier 87 00:07:41,870 --> 00:07:44,920 befolgen, um zu erfahren, wie Sie Google Maps unter iOS, aber für Android 88 00:07:45,800 --> 00:07:52,930 verwenden Auf jeden Fall muss hier das Google Maps SDK für Android API aktiviert werden. Um diese API zu aktivieren, können Sie hier für 89 00:07:52,940 --> 00:07:58,760 das Projekt, an dem Sie zuvor beim Einrichten dieses API-Schlüssels gearbeitet haben, zur Google Cloud-Plattform 90 00:07:59,000 --> 00:08:05,240 wechseln. Hier können Sie dann unter APIs und Dienste zur Bibliothek wechseln, die Sie zu einer 91 00:08:05,240 --> 00:08:09,710 Bibliothek führt Von allen Google-APIs und dem Karten-SDK für Android müssen 92 00:08:09,710 --> 00:08:11,120 Sie dies aktivieren. 93 00:08:11,120 --> 00:08:15,980 Sie müssen auch das Karten-SDK für iOS einrichten, wenn Sie Google Maps unter iOS verwenden möchten, das ich hier 94 00:08:15,980 --> 00:08:17,150 jedoch nicht verwenden werde. 95 00:08:17,350 --> 00:08:18,760 Jetzt sollte es hier schon aktiviert sein, aber 96 00:08:18,770 --> 00:08:21,500 stellen Sie sicher, dass es ist. Falls es nicht aktiviert war, tun Sie 97 00:08:21,590 --> 00:08:22,710 dies auf jeden Fall. 98 00:08:24,370 --> 00:08:27,240 Damit sollte dies auch so eingerichtet werden, dass 99 00:08:27,250 --> 00:08:34,450 es funktioniert. Wenn wir nun reaktionsnatives Run-Android ausführen, sollte die App, die wir in einem früheren Modul mit dem von der Expo 100 00:08:34,450 --> 00:08:41,260 verwalteten Workflow erstellt haben, jetzt auch ohne den von der Expo verwalteten Workflow ohne funktionieren Der Expo-Client wird auf dem 101 00:08:41,260 --> 00:08:47,770 Simulator oder dem realen Gerät verwendet, aber stattdessen lokal mit Android Studio oder natürlich auch mit iOS erstellt, wenn 102 00:08:47,770 --> 00:08:54,000 Sie dies verwenden möchten, und daher auf die gleiche Weise, wie Sie es in einem von React Native 103 00:08:54,010 --> 00:08:55,510 CLI erstellten Projekt tun 104 00:08:55,510 --> 00:09:01,000 würden Jetzt nach dem Auswerfen aus dem verwalteten Workflow, was natürlich bedeutet, dass der gesamte Code 105 00:09:01,000 --> 00:09:07,180 im verwalteten Workflow geschrieben wurde, und ich ihn jetzt im nicht verwalteten Workflow ausführe, was ziemlich süß ist. 106 00:09:07,180 --> 00:09:10,830 Warten wir also, bis dies abgeschlossen ist, und prüfen Sie, ob diese App ordnungsgemäß funktioniert. 107 00:09:11,590 --> 00:09:16,780 Es wird hier auf dem Android-Emulator angezeigt, dem Emulator, den ich zum Testen verwenden möchte, da 108 00:09:16,780 --> 00:09:23,020 ich dort die Emulatorkamera zum Testen verwenden kann. Um dies zu betonen, wird jetzt nicht die Expo-Client-App verwendet, sondern 109 00:09:23,020 --> 00:09:24,400 auch nicht. Um 110 00:09:24,400 --> 00:09:28,930 hier einen Barcode zu scannen, da kein Barcode zum Scannen vorhanden ist, handelt es 111 00:09:28,940 --> 00:09:34,570 sich jetzt wirklich um eine App, die mit Android Studio erstellt und an unsere App gesendet wurde. 112 00:09:34,720 --> 00:09:38,710 Also hier ist unsere App und jetzt wollen wir versuchen, hier einen 113 00:09:38,710 --> 00:09:44,470 neuen Ort hinzuzufügen, zu testen, ein Bild aufzunehmen, den Zugriff auf die Kamera zuzulassen und dann dieses Bild 114 00:09:49,370 --> 00:09:50,630 aufzunehmen. Ja, es zuschneiden, 115 00:09:53,960 --> 00:09:55,190 einen Ort auf 116 00:09:56,060 --> 00:09:58,010 der Karte auswählen, vielleicht kommt die 117 00:10:00,760 --> 00:10:04,050 Karte. Dieser Ort sieht gut aus für mich, speichern Sie 118 00:10:04,070 --> 00:10:06,760 diesen, speichern Sie den Ort, hier sind wir 119 00:10:06,760 --> 00:10:07,540 und 120 00:10:07,540 --> 00:10:09,940 jetzt lassen Sie mich diese App schließen. 121 00:10:10,060 --> 00:10:13,210 Dort sehen Sie auch, dass dies wirklich eine eigenständige 122 00:10:13,210 --> 00:10:19,210 App ist. Wenn ich die App-Schublade hier auf dem Gerät, hier im Simulator öffne, ist es diese 123 00:10:19,380 --> 00:10:22,040 großartige App, die Sie hier sehen. 124 00:10:22,040 --> 00:10:28,920 Wenn ich dies starte, wird die App, in der wir gerade gearbeitet haben, neu gestartet und es gibt unseren 125 00:10:29,190 --> 00:10:30,330 Platz, da sie 126 00:10:30,330 --> 00:10:34,540 im lokalen Speicher gespeichert wurde. Das Bild wurde offensichtlich im Dateisystem 127 00:10:34,710 --> 00:10:41,370 gespeichert, sonst würden wir es nicht sehen und es funktioniert wie zuvor, aber jetzt Nicht innerhalb des Expo-Clients, 128 00:10:41,370 --> 00:10:41,970 sondern 129 00:10:41,970 --> 00:10:48,300 als eigenständige App ohne Expo-Wrapper, die weiterhin einige der Expo-APIs und Expo-Pakete mit Hilfe dieses Unimodule-Pakets verwendet, 130 00:10:48,300 --> 00:10:53,640 das automatisch zu dem nackten Workflow hinzugefügt und konfiguriert wird, den wir andererseits erhalten haben 131 00:10:53,700 --> 00:10:55,080 mit Hilfe des Auswurfs. 132 00:10:55,080 --> 00:10:57,000 So viele coole Dinge, die dort vor sich gehen.