Neben dem Einrichten eines neuen Projekts von Grund auf mit React Native CLI oder mit der Expo-CLI und der
anschließenden Auswahl des nackten Workflows
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
bekommen können Die praktischen Funktionen des verwalteten Workflows während der Entwicklung und wenn
Sie beispielsweise fertig sind oder wenn Sie ein bestimmtes Paket eines Drittanbieters benötigen, das einige Funktionen integriert, die Sie nicht in die Ausstellung
integriert haben und die Sie in einem solchen Fall unbedingt benötigen Wechseln Sie immer noch und Sie
müssen die App nicht von Grund auf neu erstellen und ein brandneues Projekt erstellen und
über Ihren Code kopieren.
Wie? Nun, in Ihrem Projekt und dies ist die
native Gerätefunktion, das großartige Ortsprojekt, das wir früher im Kurs erstellt haben, wo wir Orte hinzufügen können,
wo wir natürlich den Standort, Karten, die Kamera, SQLite verwenden, wo wir all diese verwenden In diesem Projekt können Sie einfach
expo eject ausführen. Dadurch wird Ihr Projekt in ein nicht expo-verwaltetes Workflow-Projekt umgewandelt.
Wichtig ist jedoch, dass es kein Zurück gibt. Natürlich
können Sie Ihren Ordner kopieren und eine Sicherungskopie erstellen und diese speichern. Wenn Sie git verwenden, können Sie natürlich zu
einem früheren Commit zurückkehren, aber wenn Sie Ihren nicht gespeichert haben Wenn Sie das Projekt einmal ausgeworfen haben, können
Sie es nicht mehr
umwandeln. Seien Sie sich dessen bewusst.
Sie müssten ein brandneues, von der Messe verwaltetes Projekt erstellen und Ihren gesamten Code kopieren, wenn
Sie zurückkehren möchten.
Wenn Sie also expo eject ausführen, sollten Sie tatsächlich gefragt werden, zu welcher Art von Projekt Sie auswerfen möchten, und
hier habe ich am Ende zwei Optionen. Die Optionen, die Sie hier übrigens sehen, können sich im Laufe der
Zeit unterscheiden, aber hier sind die beiden Optionen, die ich habe, Bare und Expo-Kit. Das Expo-Kit ist veraltet. Dies ist im
Grunde das, was wir hatten, bevor wir den nackten Workflow hatten. Sie sollten also nicht wirklich zu
diesem wechseln. Stattdessen können Sie hier zu nackt wechseln, was
einfach bedeutet, dass dies jetzt in ein React Native-Projekt umgewandelt wird. Als ob es mit der
React Native CLI ohne den Expo-Wrapper erstellt würde, aber es wird
wie hier auf der Seite "React-Native-Unimodules" vorkonfiguriert. Dies ist eine Art Paket, das Expo benötigt,
um alle diese Expo-APIs für a verfügbar zu machen Nicht-Expo-App. So werden all diese Dinge bei jeder Aktion vorkonfiguriert,
sodass Sie dies nicht tun müssen,
sodass Sie sozusagen eine React Native plus-App erhalten. Wenn ich hier die Eingabetaste drücke und jetzt wichtig,
können Sie nicht mehr zurückkehren, sobald dies abgeschlossen ist. Sie können einen Namen für den Startbildschirm auswählen und
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,
aber das liegt bei Ihnen und jetzt wird dies seinen Job machen.
Es transformiert das Projekt, fügt einen
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
nicht möglich, da dort, da Sie dies jetzt lokal erstellen müssen,
keine iOS-Apps erstellt
werden können und alles vorkonfiguriert und einige Abhängigkeiten installiert werden, sodass Sie Ihren vorhandenen Code verwenden
können und alle Expo-Pakete, die Sie bereits in diesem nackten Setup installiert haben, so
dass hier nicht nur alle Unimodule eingerichtet
werden, sondern auch sichergestellt wird, dass alle Pakete, die Sie bereits verwenden, wie Expo Location oder Expo SQLite,
auch diese Pakete enthalten Arbeit. Nun kann dies eine Weile dauern,
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
Arbeit erledigt hat, aber es gab zwei Pakete, die eine manuelle Einrichtung erfordern.
Sie können einfach auf diese Links klicken, um Anweisungen zu erhalten, was Sie dort
tun müssen. Es ist die Expo-Bildauswahl und das React Native-Kartenpaket, in dem Sie eine manuelle Installation durchführen müssen, um
den Vorgang abzuschließen.
Hier auf der Expo
Image Picker-Seite müssen wir am Ende die Port-Installation im iOS-Ordner ausführen, also müssen wir alle
Dinge nach der Installation des Pakets erledigen. Im Projektordner navigiere ich zu iOS und führe die
Portinstallation aus. Port ist wie npm für iOS. Es installiert einige Abhängigkeiten, die iOS benötigt, um korrekt
zu funktionieren. Das passiert also jetzt und sobald dies erledigt ist, werden wir es auch tun Ich muss diesen
Eintrag hier zum Android-Manifest hinzufügen, also müssen wir das auch tun.
Wir müssen also zum Android-Ordner, dem dortigen App-Ordner und im Quellordner, dem AndroidManifest, gehen
und dies dann, wie hier beschrieben, in die Anwendungs-Tags einfügen.
Hier ist also die Anwendung und dort sollten wir diesen Aktivitätseintrag hier hinzufügen, so ist dies erforderlich.
Jetzt, wo ich schon hier bin, werden Sie auch sehen, dass diese Manifestdatei auch auf eine
bestimmte
Weise eingerichtet wurde, sie enthält alle Berechtigungen und natürlich möchten Sie das nicht tun, Sie möchten nur nach den
Berechtigungen fragen du brauchst wirklich.
Entfernen Sie also, wie hier angegeben, alle Berechtigungen, die Ihre App nicht benötigt, und zum Beispiel sollte meine Demo-Anwendung hier
nur die Zugriffsberechtigung zum Suchen des Standorts benötigen, die ich dort nach oben verschieben
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
erforderlich sein sollten.
Dies sollten eigentlich alle Berechtigungen sein, und Sie können alle Pakete von Drittanbietern oder
alle von Ihnen verwendeten Expo-API-Pakete überprüfen, um sicherzustellen, dass Sie keine Berechtigungen verpassen.
Damit werde ich tatsächlich alle diese Berechtigungen hier und auch alle diese Berechtigungen auskommentieren und wir werden es
testen, um zu sehen, ob das funktioniert. Damit ist das Einrichten des Bildauswahlpakets abgeschlossen. Jetzt muss auch React Native
Maps konfiguriert werden und dort können wir in die Installationsanweisungen eintauchen.
Nun, dieser Befehl zur Installation von npm, der bereits ausgeführt wurde, aber
jetzt müssen wir React Native Link React Native Maps ausführen. Gehen wir also einfach eine Ebene
zurück in den Stammprojektordner und führen React Native Link React Native Maps aus. Dadurch
wird nun alles
verknüpft. Stellen Sie sicher, dass alles korrekt funktioniert, dass alles korrekt konfiguriert
ist und Sie noch einige manuelle Schritte ausführen müssen Zeug, all diese Dinge hier sollten
nicht erforderlich sein, das sollte alles mit dem Verknüpfen geschehen, aber unter Android müssen Sie sicherstellen, dass Sie diesen Eintrag
hier, diesen Metadateneintrag, in Ihren Anwendungsschlüssel im AndroidManifest einfügen.
Hier in der Anwendung können wir diesen Eintrag hinzufügen und dort müssen Sie Ihren Google Maps-API-Schlüssel
platzieren.
Wenn Sie sich erinnern, habe
ich das jetzt im env-Ordner. Ich greife einfach nach diesem Schlüssel und füge ihn hier hinzu. Ersetzen Sie hier
Ihren Google Maps API-Schlüssel durch diesen Schlüssel.
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,
ist
dies wichtig, da dies sonst nicht funktioniert. Für iOS müssen Sie nichts Besonderes tun, es sei
denn, Sie möchten dort Google Maps verwenden. In diesem Fall müssen Sie die Anweisungen in den Anweisungen zu React Native Maps hier
befolgen, um zu erfahren, wie Sie Google Maps unter iOS, aber für Android
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
das Projekt, an dem Sie zuvor beim Einrichten dieses API-Schlüssels gearbeitet haben, zur Google Cloud-Plattform
wechseln. Hier können Sie dann unter APIs und Dienste zur Bibliothek wechseln, die Sie zu einer
Bibliothek führt Von allen Google-APIs und dem Karten-SDK für Android müssen
Sie dies aktivieren.
Sie müssen auch das Karten-SDK für iOS einrichten, wenn Sie Google Maps unter iOS verwenden möchten, das ich hier
jedoch nicht verwenden werde.
Jetzt sollte es hier schon aktiviert sein, aber
stellen Sie sicher, dass es ist. Falls es nicht aktiviert war, tun Sie
dies auf jeden Fall.
Damit sollte dies auch so eingerichtet werden, dass
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
verwalteten Workflow erstellt haben, jetzt auch ohne den von der Expo verwalteten Workflow ohne funktionieren Der Expo-Client wird auf dem
Simulator oder dem realen Gerät verwendet, aber stattdessen lokal mit Android Studio oder natürlich auch mit iOS erstellt, wenn
Sie dies verwenden möchten, und daher auf die gleiche Weise, wie Sie es in einem von React Native
CLI erstellten Projekt tun
würden Jetzt nach dem Auswerfen aus dem verwalteten Workflow, was natürlich bedeutet, dass der gesamte Code
im verwalteten Workflow geschrieben wurde, und ich ihn jetzt im nicht verwalteten Workflow ausführe, was ziemlich süß ist.
Warten wir also, bis dies abgeschlossen ist, und prüfen Sie, ob diese App ordnungsgemäß funktioniert.
Es wird hier auf dem Android-Emulator angezeigt, dem Emulator, den ich zum Testen verwenden möchte, da
ich dort die Emulatorkamera zum Testen verwenden kann. Um dies zu betonen, wird jetzt nicht die Expo-Client-App verwendet, sondern
auch nicht. Um
hier einen Barcode zu scannen, da kein Barcode zum Scannen vorhanden ist, handelt es
sich jetzt wirklich um eine App, die mit Android Studio erstellt und an unsere App gesendet wurde.
Also hier ist unsere App und jetzt wollen wir versuchen, hier einen
neuen Ort hinzuzufügen, zu testen, ein Bild aufzunehmen, den Zugriff auf die Kamera zuzulassen und dann dieses Bild
aufzunehmen. Ja, es zuschneiden,
einen Ort auf
der Karte auswählen, vielleicht kommt die
Karte. Dieser Ort sieht gut aus für mich, speichern Sie
diesen, speichern Sie den Ort, hier sind wir
und
jetzt lassen Sie mich diese App schließen.
Dort sehen Sie auch, dass dies wirklich eine eigenständige
App ist. Wenn ich die App-Schublade hier auf dem Gerät, hier im Simulator öffne, ist es diese
großartige App, die Sie hier sehen.
Wenn ich dies starte, wird die App, in der wir gerade gearbeitet haben, neu gestartet und es gibt unseren
Platz, da sie
im lokalen Speicher gespeichert wurde. Das Bild wurde offensichtlich im Dateisystem
gespeichert, sonst würden wir es nicht sehen und es funktioniert wie zuvor, aber jetzt Nicht innerhalb des Expo-Clients,
sondern
als eigenständige App ohne Expo-Wrapper, die weiterhin einige der Expo-APIs und Expo-Pakete mit Hilfe dieses Unimodule-Pakets verwendet,
das automatisch zu dem nackten Workflow hinzugefügt und konfiguriert wird, den wir andererseits erhalten haben
mit Hilfe des Auswurfs.
So viele coole Dinge, die dort vor sich gehen.