1 00:00:02,500 --> 00:00:07,190 Jetzt habe ich die Verknüpfung hier deaktiviert, damit ich nicht alle diese Warnungen und Fehler bezüglich des Codestils habe. 2 00:00:07,190 --> 00:00:10,550 Natürlich können Sie Ihren Code anpassen, um diesem Stil zu folgen, 3 00:00:10,640 --> 00:00:12,820 das ist am Ende eine persönliche Präferenz. 4 00:00:12,830 --> 00:00:19,070 Jetzt möchte ich Ihnen zeigen, wie Sie natürlich den Code ändern können, aber auch, wie 5 00:00:19,130 --> 00:00:24,390 wir einer solchen Vanilla React Native-App eine native Funktionalität hinzufügen können. 6 00:00:24,610 --> 00:00:28,780 Deshalb werde ich diese Start-App zunächst stark vereinfachen, 7 00:00:28,850 --> 00:00:37,250 einfach den gesamten Inhalt hier entfernen und einfach einen hier mit Flex One eingerichteten Grundstil hinzufügen, das 8 00:00:37,400 --> 00:00:44,090 Inhaltscenter begründen und das Elementcenter ausrichten, um meinen Inhalt zu zentrieren der Bildschirm. 9 00:00:44,090 --> 00:00:46,550 Werde dieses Ding hier los 10 00:00:46,760 --> 00:00:54,150 und von all diesen Importen hier möchte ich das Stylesheet verwenden, ich möchte die Ansicht verwenden 11 00:00:54,290 --> 00:00:59,720 und ich möchte die Schaltfläche verwenden, da ich die Bildauswahlfunktion hinzufügen möchte. 12 00:00:59,750 --> 00:01:01,660 Hier gebe ich meine Ansicht 13 00:01:02,750 --> 00:01:08,100 und meine Schaltfläche zurück und auf der Schaltfläche sage ich Bild aufnehmen und dann möchte 14 00:01:08,240 --> 00:01:10,460 ich in onPress die Bildauswahl öffnen. 15 00:01:10,460 --> 00:01:11,990 Wie können wir das hinzufügen? 16 00:01:12,230 --> 00:01:20,030 Da dies ein React Native-Projekt ohne Expo ist, können wir die Expo-APIs hier nicht einfach verwenden. 17 00:01:20,040 --> 00:01:25,530 Es gibt tatsächlich eine Möglichkeit, sie zu verwenden, und ich werde später in diesem Modul darauf zurückkommen, 18 00:01:25,530 --> 00:01:30,690 aber Sie müssten ein paar Dinge konfigurieren. Was wir also stattdessen tun können, 19 00:01:30,690 --> 00:01:34,660 ist, dass wir etwas tun können, was Sie viel tun werden, 20 00:01:34,730 --> 00:01:39,810 wenn Sie mit einer Vanille-React-Native-App arbeiten. Wir suchen beispielsweise nach React Native-Bildauswahl, um ein Paket 21 00:01:39,810 --> 00:01:43,060 zu finden, das uns dabei hilft Beispiel: React Native 22 00:01:43,320 --> 00:01:49,140 Image Picker-Paket. Jetzt können wir dieses installieren, da wir jetzt jedes Paket von Drittanbietern mitbringen können, unabhängig 23 00:01:49,320 --> 00:01:55,080 davon, ob es native Funktionen hinzufügt oder nicht. Früher war dies mit expo nicht wirklich möglich. Dort 24 00:01:55,080 --> 00:01:59,520 konnten Sie nur Pakete von Drittanbietern mitbringen, die nicht auf native Gerätefunktionen zurückgreifen. Jetzt 25 00:01:59,520 --> 00:02:01,380 haben Sie keine Einschränkungen mehr. 26 00:02:01,470 --> 00:02:03,060 Jetzt können wir 27 00:02:03,360 --> 00:02:09,810 dies hinzufügen und hier können wir dies installieren, indem wir den Installationsanweisungen hier folgen. 28 00:02:09,810 --> 00:02:18,690 Gehen Sie also zurück in unser Projekt und führen Sie dort npm install --save aus. Hier ist dann React Native 29 00:02:21,970 --> 00:02:25,430 Image Picker wie folgt. Übrigens können Sie diesen Prozess hier 30 00:02:25,450 --> 00:02:30,730 weiter ausführen, und Sie sollten sicherstellen, dass Codeänderungen nach dem Speichern Ihrer Dateien erfasst und auf Ihre Geräte übertragen werden. 31 00:02:30,970 --> 00:02:34,310 Warten wir also, bis diese Installation abgeschlossen ist. 32 00:02:34,330 --> 00:02:35,090 Jetzt ist es 33 00:02:35,110 --> 00:02:35,860 erledigt, 34 00:02:36,800 --> 00:02:39,240 hat eine ganze Weile gedauert und jetzt müssen wir 35 00:02:39,240 --> 00:02:41,900 dies installieren und das Gute ist, dass dieses Paket sehr 36 00:02:41,910 --> 00:02:44,770 einfach zu installieren ist. Sie sollten diesen Befehl nur hier ausführen 37 00:02:44,790 --> 00:02:47,250 müssen - React Native Link, React Native Image Picker. 38 00:02:47,340 --> 00:02:49,270 Führen Sie dies also in 39 00:02:50,400 --> 00:02:53,550 Ihrem Projekt so aus, und Sie sollten gut sein. 40 00:02:53,730 --> 00:02:57,870 Jetzt werde ich sagen, dass es Pakete von Drittanbietern gibt, die mehr Aufwand erfordern, es 41 00:02:57,870 --> 00:03:00,960 hängt wirklich vom Paket ab. Für die Expo war 42 00:03:00,960 --> 00:03:05,540 es offensichtlich sehr einfach, Sie haben gerade die Expo-Installation ausgeführt, das war sehr schnell, hat 43 00:03:05,550 --> 00:03:08,720 nicht so lange gedauert und Sie mussten nichts anderes tun. 44 00:03:08,880 --> 00:03:11,140 Hier müssen Sie einen zusätzlichen Befehl 45 00:03:11,270 --> 00:03:12,870 ausführen, aber das ist 46 00:03:12,870 --> 00:03:16,890 natürlich auch nicht schlecht, aber ich werde noch einmal sagen, dass nicht 47 00:03:16,920 --> 00:03:22,950 alle Pakete diesen Befehl unterstützen. Einige Pakete erfordern viel mehr manuelle Verkabelungsarbeit, manuelle Arbeit, bei der Sie dann 48 00:03:22,950 --> 00:03:28,250 tatsächlich in die eintauchen müssen Android- und iOS-Ordner, um dort an einigen Konfigurationsdateien zu arbeiten. 49 00:03:28,290 --> 00:03:33,600 Das hat der Befehl React Native Link für Sie getan, zum Beispiel unter Android, wenn Sie 50 00:03:33,600 --> 00:03:39,540 in den App-Ordner eintauchen und dort, Quelle und dann im Quellordner in Build Gradle, sehen Sie, dass dort 51 00:03:42,290 --> 00:03:43,970 diese Zeile hinzugefügt wurde. 52 00:03:44,000 --> 00:03:45,710 Dies war von Anfang 53 00:03:45,710 --> 00:03:48,610 an nicht vorhanden. Dies wurde durch den Link-Befehl 54 00:03:48,830 --> 00:03:52,250 React Native hinzugefügt. Bei einigen Paketen müssen Sie diese 55 00:03:52,250 --> 00:03:57,080 Einträge manuell hinzufügen. Viele Pakete unterstützen den Link-Befehl und bei neueren Versionen von React 56 00:03:57,080 --> 00:04:02,480 Native sogar einige Pakete Unterstützung der automatischen Verknüpfung, bei der diese Verknüpfung nach Abschluss der Installation 57 00:04:02,480 --> 00:04:06,550 automatisch erfolgt, aber nicht alle Pakete diese Unterstützung bieten. Beachten Sie dies. 58 00:04:06,550 --> 00:04:12,680 Hinter den Kulissen wurde viel Konfiguration geändert. Damit können wir dieses Paket jetzt 59 00:04:13,100 --> 00:04:19,680 wieder verwenden, wie in den Dokumenten angegeben, damit wir diesen Import hier und hier 60 00:04:20,000 --> 00:04:31,050 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 61 00:04:34,100 --> 00:04:37,360 hier ein wenig anders als die Messe. 62 00:04:37,370 --> 00:04:42,400 Hier nennen wir Image Picker Show Image Picker mit Optionen, die wir einrichten 63 00:04:42,410 --> 00:04:49,550 können. Die Optionen werden wie hier oben oder in den Dokumenten allgemein konfiguriert konfiguriert. Hier werde ich einfach den 64 00:04:49,640 --> 00:04:56,120 gesamten Code hier abrufen, so kopieren Sie ihn in das Pick-Bild Funktion, diesen Set-State-Aufruf loswerden, wir befinden 65 00:04:56,140 --> 00:04:58,510 uns nicht in einer klassenbasierten Komponente, 66 00:04:58,510 --> 00:05:00,450 daher können wir dies 67 00:05:00,460 --> 00:05:03,820 nicht tun. Stattdessen protokolliere ich hier im else-Block nur 68 00:05:04,000 --> 00:05:06,560 den Antwort-URI, der der Pfad des Bildes 69 00:05:06,590 --> 00:05:09,960 sein sollte Das wurde genommen und dann haben wir 70 00:05:10,150 --> 00:05:11,160 hier ein 71 00:05:11,340 --> 00:05:16,330 paar Handler für verschiedene Szenarien und damit wollen wir sehen, ob das funktioniert. 72 00:05:16,330 --> 00:05:17,440 Wenn wir 73 00:05:20,110 --> 00:05:21,550 dies speichern, sollte es 74 00:05:21,550 --> 00:05:28,470 normalerweise hier neu erstellt werden, aber aufgrund unseres neu installierten Pakets werde ich diesen Prozess beenden und reaktionsnatives run-android 75 00:05:28,490 --> 00:05:33,680 hier jetzt in meinem in Visual Studio Code integrierten Terminal und daher in diesem 76 00:05:33,680 --> 00:05:42,270 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 77 00:05:42,270 --> 00:05:47,750 Emulator neu gestartet, sodass wir sie hoffentlich dort sehen und die Bildauswahl hier testen können. 78 00:05:47,820 --> 00:05:51,060 Warten wir also, bis der Vorgang abgeschlossen ist und der Erstellungsprozess abgeschlossen ist. 79 00:05:51,060 --> 00:05:58,260 Jetzt kommt die App und wenn ich sie drücke, bekomme ich diese Überlagerung, ich kann auf Foto machen klicken 80 00:05:58,260 --> 00:05:59,700 und nichts passiert. 81 00:05:59,700 --> 00:06:04,290 Grund dafür sind fehlende Berechtigungen und das ist die manuelle Arbeit, die ich gemeint habe. Wir müssen in den 82 00:06:04,290 --> 00:06:11,610 Android-Ordner gehen, dort in Source, Main, AndroidManifest, das die Android-App konfiguriert, und dort müssen 83 00:06:11,610 --> 00:06:16,770 Sie eine neue Berechtigung hinzufügen. Sie können diese Internetberechtigung kopieren, die 84 00:06:16,770 --> 00:06:22,530 Sie immer benötigen, damit die Android-App mit dem Entwicklungsserver kommunizieren kann. Dort können Sie jetzt 85 00:06:22,530 --> 00:06:29,360 die Kameraberechtigung hinzufügen, die Sie hinzufügen müssen, damit diese App auf die Gerätekamera zugreifen kann wird nicht unterstützt. 86 00:06:29,370 --> 00:06:35,820 Jetzt können wir diesen Prozess erneut ausführen, die Anwendung neu erstellen und sicherstellen, dass wir diese neue Einstellung 87 00:06:35,820 --> 00:06:39,090 berücksichtigen. Damit sollten wir diese nun öffnen können. 88 00:06:39,120 --> 00:06:43,070 Es ist also wieder ein zusätzliches Setup, das wir in der Expo-Welt natürlich nicht machen mussten. 89 00:06:44,400 --> 00:06:49,180 Unter iOS müssen Sie übrigens auch etwas Ähnliches tun, während dies neu erstellt wird. Wenn Sie dort in 90 00:06:49,200 --> 00:06:57,100 Ihre RNWithoutExpo-Datei gehen, finden Sie die Informationen. plist-Datei und in dieser Datei müssen 91 00:06:57,490 --> 00:07:02,630 Sie auch einen Eintrag hinzufügen, um diese Berechtigung anzufordern. 92 00:07:07,760 --> 00:07:14,660 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 93 00:07:14,670 --> 00:07:19,920 Anweisungen finden Sie in den offiziellen Dokumenten dieses Pakets unter Installiertes Dokument. Wenn Sie dort 94 00:07:19,920 --> 00:07:25,710 klicken, klicken Sie dort Hier finden Sie Anweisungen, welche Berechtigungen für Android festgelegt werden müssen. Ich 95 00:07:25,710 --> 00:07:27,100 habe auch eine 96 00:07:27,150 --> 00:07:32,240 vergessen. Wir müssen auch diese externe Speicherberechtigung festlegen. Lassen Sie mich also zum AndroidManifest 97 00:07:32,250 --> 00:07:38,380 zurückkehren, fügen Sie diese hier hinzu und führen Sie sie jetzt auf Android und iOS erneut aus 98 00:07:38,410 --> 00:07:43,970 Dort müssen Sie diese Schlüssel hier einstellen. Sie kopieren das alles und 99 00:07:47,020 --> 00:07:53,410 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. 100 00:07:57,460 --> 00:07:58,210 Lassen 101 00:07:58,750 --> 00:08:01,750 Sie uns die App auf Android überprüfen und wenn ich 102 00:08:01,930 --> 00:08:05,860 jetzt auf Foto machen klicke, werde ich hier um Erlaubnis gebeten, dies geschieht 103 00:08:05,860 --> 00:08:08,730 jetzt automatisch, das Paket erledigt das für uns und 104 00:08:08,920 --> 00:08:12,120 jetzt öffnet sich die Kamera. Das funktioniert jetzt, aber 105 00:08:12,130 --> 00:08:17,350 wie Sie gesehen haben, mit ein wenig zusätzlicher Konfiguration und indem Sie den Anweisungen in den offiziellen 106 00:08:17,350 --> 00:08:23,260 Dokumenten folgen, hat jedes Paket dort seine eigenen Anweisungen. Einige Pakete unterstützen nicht einmal den Link-Befehl, 107 00:08:23,260 --> 00:08:23,830 da 108 00:08:23,860 --> 00:08:25,530 müssen Sie noch 109 00:08:25,560 --> 00:08:31,380 mehr tun, andere Pakete erfordern weniger Arbeit. Sie haben mehr Flexibilität, aber auch mehr Aufgaben. 110 00:08:31,390 --> 00:08:37,240 Auf diese Weise können Sie jedoch Pakete von Drittanbietern, die native Gerätefunktionen nutzen, in eine React Native-App für Ihren 111 00:08:37,240 --> 00:08:40,970 von Ihnen geschriebenen Komponentencode integrieren. Dies ist derselbe Code, den wir während 112 00:08:41,020 --> 00:08:43,630 des gesamten Kurses geschrieben haben - dieselben 113 00:08:43,630 --> 00:08:49,660 Komponenten, dieselbe Logik, dieselbe Methode wie Sie Ihre App erstellen. Sie können dieselben Ordner erstellen und die React-Navigation 114 00:08:49,660 --> 00:08:52,540 hinzufügen, damit sich nicht alles ändert.