Jetzt habe ich die Verknüpfung hier deaktiviert, damit ich nicht alle diese Warnungen und Fehler bezüglich des Codestils habe.
Natürlich können Sie Ihren Code anpassen, um diesem Stil zu folgen,
das ist am Ende eine persönliche Präferenz.
Jetzt möchte ich Ihnen zeigen, wie Sie natürlich den Code ändern können, aber auch, wie
wir einer solchen Vanilla React Native-App eine native Funktionalität hinzufügen können.
Deshalb werde ich diese Start-App zunächst stark vereinfachen,
einfach den gesamten Inhalt hier entfernen und einfach einen hier mit Flex One eingerichteten Grundstil hinzufügen, das
Inhaltscenter begründen und das Elementcenter ausrichten, um meinen Inhalt zu zentrieren der Bildschirm.
Werde dieses Ding hier los
und von all diesen Importen hier möchte ich das Stylesheet verwenden, ich möchte die Ansicht verwenden
und ich möchte die Schaltfläche verwenden, da ich die Bildauswahlfunktion hinzufügen möchte.
Hier gebe ich meine Ansicht
und meine Schaltfläche zurück und auf der Schaltfläche sage ich Bild aufnehmen und dann möchte
ich in onPress die Bildauswahl öffnen.
Wie können wir das hinzufügen?
Da dies ein React Native-Projekt ohne Expo ist, können wir die Expo-APIs hier nicht einfach verwenden.
Es gibt tatsächlich eine Möglichkeit, sie zu verwenden, und ich werde später in diesem Modul darauf zurückkommen,
aber Sie müssten ein paar Dinge konfigurieren. Was wir also stattdessen tun können,
ist, dass wir etwas tun können, was Sie viel tun werden,
wenn Sie mit einer Vanille-React-Native-App arbeiten. Wir suchen beispielsweise nach React Native-Bildauswahl, um ein Paket
zu finden, das uns dabei hilft Beispiel: React Native
Image Picker-Paket. Jetzt können wir dieses installieren, da wir jetzt jedes Paket von Drittanbietern mitbringen können, unabhängig
davon, ob es native Funktionen hinzufügt oder nicht. Früher war dies mit expo nicht wirklich möglich. Dort
konnten Sie nur Pakete von Drittanbietern mitbringen, die nicht auf native Gerätefunktionen zurückgreifen. Jetzt
haben Sie keine Einschränkungen mehr.
Jetzt können wir
dies hinzufügen und hier können wir dies installieren, indem wir den Installationsanweisungen hier folgen.
Gehen Sie also zurück in unser Projekt und führen Sie dort npm install --save aus. Hier ist dann React Native
Image Picker wie folgt. Übrigens können Sie diesen Prozess hier
weiter ausführen, und Sie sollten sicherstellen, dass Codeänderungen nach dem Speichern Ihrer Dateien erfasst und auf Ihre Geräte übertragen werden.
Warten wir also, bis diese Installation abgeschlossen ist.
Jetzt ist es
erledigt,
hat eine ganze Weile gedauert und jetzt müssen wir
dies installieren und das Gute ist, dass dieses Paket sehr
einfach zu installieren ist. Sie sollten diesen Befehl nur hier ausführen
müssen - React Native Link, React Native Image Picker.
Führen Sie dies also in
Ihrem Projekt so aus, und Sie sollten gut sein.
Jetzt werde ich sagen, dass es Pakete von Drittanbietern gibt, die mehr Aufwand erfordern, es
hängt wirklich vom Paket ab. Für die Expo war
es offensichtlich sehr einfach, Sie haben gerade die Expo-Installation ausgeführt, das war sehr schnell, hat
nicht so lange gedauert und Sie mussten nichts anderes tun.
Hier müssen Sie einen zusätzlichen Befehl
ausführen, aber das ist
natürlich auch nicht schlecht, aber ich werde noch einmal sagen, dass nicht
alle Pakete diesen Befehl unterstützen. Einige Pakete erfordern viel mehr manuelle Verkabelungsarbeit, manuelle Arbeit, bei der Sie dann
tatsächlich in die eintauchen müssen Android- und iOS-Ordner, um dort an einigen Konfigurationsdateien zu arbeiten.
Das hat der Befehl React Native Link für Sie getan, zum Beispiel unter Android, wenn Sie
in den App-Ordner eintauchen und dort, Quelle und dann im Quellordner in Build Gradle, sehen Sie, dass dort
diese Zeile hinzugefügt wurde.
Dies war von Anfang
an nicht vorhanden. Dies wurde durch den Link-Befehl
React Native hinzugefügt. Bei einigen Paketen müssen Sie diese
Einträge manuell hinzufügen. Viele Pakete unterstützen den Link-Befehl und bei neueren Versionen von React
Native sogar einige Pakete Unterstützung der automatischen Verknüpfung, bei der diese Verknüpfung nach Abschluss der Installation
automatisch erfolgt, aber nicht alle Pakete diese Unterstützung bieten. Beachten Sie dies.
Hinter den Kulissen wurde viel Konfiguration geändert. Damit können wir dieses Paket jetzt
wieder verwenden, wie in den Dokumenten angegeben, damit wir diesen Import hier und hier
hinzufügen und dann möglicherweise auch die Funktion zum Auswählen von Bildern hier hinzufügen und diese mit unserer Schaltfläche verbinden können. Jetzt funktioniert die Bildauswahl
hier ein wenig anders als die Messe.
Hier nennen wir Image Picker Show Image Picker mit Optionen, die wir einrichten
können. Die Optionen werden wie hier oben oder in den Dokumenten allgemein konfiguriert konfiguriert. Hier werde ich einfach den
gesamten Code hier abrufen, so kopieren Sie ihn in das Pick-Bild Funktion, diesen Set-State-Aufruf loswerden, wir befinden
uns nicht in einer klassenbasierten Komponente,
daher können wir dies
nicht tun. Stattdessen protokolliere ich hier im else-Block nur
den Antwort-URI, der der Pfad des Bildes
sein sollte Das wurde genommen und dann haben wir
hier ein
paar Handler für verschiedene Szenarien und damit wollen wir sehen, ob das funktioniert.
Wenn wir
dies speichern, sollte es
normalerweise hier neu erstellt werden, aber aufgrund unseres neu installierten Pakets werde ich diesen Prozess beenden und reaktionsnatives run-android
hier jetzt in meinem in Visual Studio Code integrierten Terminal und daher in diesem
Projektordner und jetzt erneut ausführen Dadurch wird dieser Entwicklungsserver erneut aufgerufen, und was noch wichtiger ist, es wird dann auch die App auf dem
Emulator neu gestartet, sodass wir sie hoffentlich dort sehen und die Bildauswahl hier testen können.
Warten wir also, bis der Vorgang abgeschlossen ist und der Erstellungsprozess abgeschlossen ist.
Jetzt kommt die App und wenn ich sie drücke, bekomme ich diese Überlagerung, ich kann auf Foto machen klicken
und nichts passiert.
Grund dafür sind fehlende Berechtigungen und das ist die manuelle Arbeit, die ich gemeint habe. Wir müssen in den
Android-Ordner gehen, dort in Source, Main, AndroidManifest, das die Android-App konfiguriert, und dort müssen
Sie eine neue Berechtigung hinzufügen. Sie können diese Internetberechtigung kopieren, die
Sie immer benötigen, damit die Android-App mit dem Entwicklungsserver kommunizieren kann. Dort können Sie jetzt
die Kameraberechtigung hinzufügen, die Sie hinzufügen müssen, damit diese App auf die Gerätekamera zugreifen kann wird nicht unterstützt.
Jetzt können wir diesen Prozess erneut ausführen, die Anwendung neu erstellen und sicherstellen, dass wir diese neue Einstellung
berücksichtigen. Damit sollten wir diese nun öffnen können.
Es ist also wieder ein zusätzliches Setup, das wir in der Expo-Welt natürlich nicht machen mussten.
Unter iOS müssen Sie übrigens auch etwas Ähnliches tun, während dies neu erstellt wird. Wenn Sie dort in
Ihre RNWithoutExpo-Datei gehen, finden Sie die Informationen. plist-Datei und in dieser Datei müssen
Sie auch einen Eintrag hinzufügen, um diese Berechtigung anzufordern.
Sie müssen hier nach einem vorhandenen Schlüssel-Wert-Paar einen neuen Schlüssel hinzufügen. Die genaue Position spielt keine Rolle. Die detaillierten
Anweisungen finden Sie in den offiziellen Dokumenten dieses Pakets unter Installiertes Dokument. Wenn Sie dort
klicken, klicken Sie dort Hier finden Sie Anweisungen, welche Berechtigungen für Android festgelegt werden müssen. Ich
habe auch eine
vergessen. Wir müssen auch diese externe Speicherberechtigung festlegen. Lassen Sie mich also zum AndroidManifest
zurückkehren, fügen Sie diese hier hinzu und führen Sie sie jetzt auf Android und iOS erneut aus
Dort müssen Sie diese Schlüssel hier einstellen. Sie kopieren das alles und
kehren dann zu den Informationen zurück. plist file Ich habe es Ihnen hier gezeigt und jetzt können Sie diese Schlüssel-Wert-Paare hier hinzufügen.
Lassen
Sie uns die App auf Android überprüfen und wenn ich
jetzt auf Foto machen klicke, werde ich hier um Erlaubnis gebeten, dies geschieht
jetzt automatisch, das Paket erledigt das für uns und
jetzt öffnet sich die Kamera. Das funktioniert jetzt, aber
wie Sie gesehen haben, mit ein wenig zusätzlicher Konfiguration und indem Sie den Anweisungen in den offiziellen
Dokumenten folgen, hat jedes Paket dort seine eigenen Anweisungen. Einige Pakete unterstützen nicht einmal den Link-Befehl,
da
müssen Sie noch
mehr tun, andere Pakete erfordern weniger Arbeit. Sie haben mehr Flexibilität, aber auch mehr Aufgaben.
Auf diese Weise können Sie jedoch Pakete von Drittanbietern, die native Gerätefunktionen nutzen, in eine React Native-App für Ihren
von Ihnen geschriebenen Komponentencode integrieren. Dies ist derselbe Code, den wir während
des gesamten Kurses geschrieben haben - dieselben
Komponenten, dieselbe Logik, dieselbe Methode wie Sie Ihre App erstellen. Sie können dieselben Ordner erstellen und die React-Navigation
hinzufügen, damit sich nicht alles ändert.