1 00:00:02,090 --> 00:00:05,970 Um zu vermeiden, dass das Image schließlich entfernt wird, 2 00:00:06,140 --> 00:00:11,180 müssen wir es in einem dauerhafteren Pfad auf unserem lokalen Gerätedateisystem speichern. 3 00:00:11,180 --> 00:00:15,350 Natürlich können wir es auch auf einen Server hochladen, aber wir haben bereits über Service 4 00:00:15,410 --> 00:00:21,970 usw. gesprochen. Hier möchte ich mich auf alle nativen Gerätefunktionen konzentrieren. Um mit unserem nativen Dateisystem zu arbeiten, 5 00:00:22,100 --> 00:00:23,660 hat expo 6 00:00:23,690 --> 00:00:26,180 uns abgedeckt. Wir können das 7 00:00:26,270 --> 00:00:32,900 Dateisystempaket hier verwenden, um dies zu tun. Sie installieren es genauso wie Sie die anderen nativen 8 00:00:32,900 --> 00:00:34,320 Pakete mit expo 9 00:00:34,320 --> 00:00:41,470 install expo-file-system installieren. Lassen Sie uns dies hier tun, expo install, wieder nur einen Wrapper um npm install, den 10 00:00:41,510 --> 00:00:48,950 Sie alternativ verwenden können. Sie müssen nur sicherstellen, dass Sie Wir verwenden die richtige Version für Ihre Expo-SDK-Version, die Sie 11 00:00:48,950 --> 00:00:52,980 verwenden, und damit haben wir diese installiert. Jetzt können wir das 12 00:00:53,010 --> 00:00:56,000 Image verschieben, nachdem wir es aufgenommen haben. 13 00:00:56,010 --> 00:00:59,080 Jetzt gibt es verschiedene Stellen in der App, an 14 00:00:59,160 --> 00:01:04,080 denen wir dies tun können. Wir können dies in der Bildauswahl direkt nach der Aufnahme tun, aber 15 00:01:04,080 --> 00:01:09,720 zu diesem Zeitpunkt wissen wir noch nicht, ob wir das Formular tatsächlich senden werden, wenn Wir behalten dieses Bild tatsächlich. 16 00:01:09,720 --> 00:01:15,330 Was ist, wenn wir hier nur ein Bild aufgenommen haben, dieses dann aber verwerfen und zurückgehen? 17 00:01:15,330 --> 00:01:20,460 Ich möchte in diesem Fall nicht, dass das Bild an einen dauerhaften Ort verschoben wird. Es sollte auf jeden 18 00:01:20,460 --> 00:01:24,300 Fall bereinigt werden. Dies ist das Standardverhalten. Daher möchte ich es an dieser Stelle 19 00:01:24,300 --> 00:01:25,390 noch nicht verschieben, 20 00:01:25,740 --> 00:01:28,330 sondern es verschieben Sobald wir das Formular eingereicht haben. 21 00:01:28,560 --> 00:01:32,610 Daher könnten wir es hier im neuen Ortsbildschirm, im Handler zum Speichern von 22 00:01:32,610 --> 00:01:38,280 Plätzen, tun, aber dann würden wir dieser Komponente all diese Dateisystemlogik hinzufügen, was möglich ist, aber dieser Komponente 23 00:01:38,280 --> 00:01:41,190 viel Logik hinzufügt, was ich eigentlich nicht möchte Dort 24 00:01:41,190 --> 00:01:43,930 möchte ich diese Komponente relativ schlank halten. 25 00:01:44,280 --> 00:01:47,640 Ein großartiger Ort dafür ist jedoch der Action Creator. 26 00:01:47,730 --> 00:01:53,220 Wir haben dies bereits in der Vergangenheit verwendet, um Nebenwirkungen wie das Senden von HTTP-Anfragen zu haben. 27 00:01:53,220 --> 00:01:58,680 Das Verschieben einer Datei ist im Grunde die gleiche Kategorie, die wir ausführen. Anstatt eine Anfrage an einen Server zu senden, 28 00:01:58,680 --> 00:01:59,180 verschieben 29 00:01:59,190 --> 00:02:00,200 wir eine Datei. Nun, 30 00:02:00,200 --> 00:02:01,620 es ist nicht so anders. 31 00:02:03,390 --> 00:02:12,210 Also also in dieser Datei hier, in der Ortsaktion. js Datei, ich werde alles als Dateisystem aus dem Expo-Dateisystem 32 00:02:12,210 --> 00:02:19,500 importieren, also werde ich von diesem neuen Paket, das wir installiert haben, und hier zusätzlich diese alternative 33 00:02:19,500 --> 00:02:26,970 Syntax des Versendens oder eines Aktionserstellers verwenden, der Redux Thunk verwendet, wo wir Geben Sie hier eine interne 34 00:02:26,970 --> 00:02:34,230 Funktion zurück, die die Versandfunktion als Argument empfängt, damit wir in dieser internen Funktion diese Aktion 35 00:02:34,230 --> 00:02:44,970 auslösen können, indem wir hier dispatch aufrufen und unser Aktionsobjekt übergeben. Ich werde hier asynchron hinzufügen, damit wir async wait verwenden können, weil wir ' 36 00:02:44,970 --> 00:02:50,670 Ich werde hier asynchrone Arbeit leisten. Hier möchte ich jetzt die 37 00:02:50,670 --> 00:02:53,030 Datei verschieben, oder? 38 00:02:53,220 --> 00:02:58,980 Dafür möchte ich dieses Dateisystempaket verwenden. Das Verschieben der Datei beinhaltet nun 39 00:02:58,980 --> 00:03:00,060 einige Dinge. 40 00:03:00,060 --> 00:03:05,160 Zunächst müssen wir den neuen Pfad der Datei ableiten, und das 41 00:03:05,160 --> 00:03:12,270 sollte natürlich ein dauerhafteres Verzeichnis sein. Dafür können wir das Dateisystem verwenden und dort haben Sie ein paar Verzeichnisse, auf die Sie zugreifen können. 42 00:03:12,270 --> 00:03:16,980 Sie haben das Cache-Verzeichnis, in dem die Datei bereits gespeichert 43 00:03:16,980 --> 00:03:25,200 ist, das Bundle-Verzeichnis, das kein wirklich gutes Verzeichnis zum Speichern von Dateien ist, die Ihre App verwendet, 44 00:03:25,200 --> 00:03:28,080 aber Sie haben auch das 45 00:03:28,080 --> 00:03:34,140 Dokumentverzeichnis Hauptverzeichnis für alle Dateien, die Ihre App benötigt und die garantiert überleben. 46 00:03:34,140 --> 00:03:38,000 Wenn Sie Ihre App deinstallieren, wird dieser Ordner ebenfalls gelöscht, 47 00:03:38,010 --> 00:03:45,540 sodass diese Dateien verloren gehen. Bis dahin bleiben sie jedoch bei App-Neustarts und langen Pausen bestehen, in denen Benutzer Ihre 48 00:03:45,540 --> 00:03:47,070 App nicht verwendet 49 00:03:47,400 --> 00:03:49,470 haben. Hier überleben die Dateien. 50 00:03:50,220 --> 00:03:55,620 Das Dateisystem-Dokumentverzeichnis ist also der Pfad, in den ich meine Datei verschieben möchte, und jetzt ist 51 00:03:55,620 --> 00:04:01,570 eine wichtige Sache zu wissen: Ihr Pfad muss auch den Dateinamen enthalten, den Sie in Zukunft verwenden möchten. 52 00:04:01,710 --> 00:04:07,410 Natürlich erhalten Sie auch einen temporären Dateinamen, wenn Sie das Bild aufnehmen, aber wenn Sie eine Datei verschieben, wird dieser Name eigentlich nicht 53 00:04:07,410 --> 00:04:14,570 aus dem Kasten herausgehalten, sondern nimmt diesen Pfad hier sozusagen als Namen an. Daher sollte dies nicht nur ein Zeiger auf 54 00:04:14,570 --> 00:04:18,050 den Ordner sein, in den Sie die Datei 55 00:04:18,150 --> 00:04:20,990 verschieben möchten, sondern auch den Dateinamen. 56 00:04:21,060 --> 00:04:24,530 Dafür bin ich glücklich, den automatisch generierten Bildnamen beizubehalten. Natürlich 57 00:04:24,540 --> 00:04:31,220 können Sie jetzt auch hier Ihre eigenen eindeutigen Bildnamen generieren, aber dafür leite ich den Dateinamen aus dem Bild 58 00:04:31,290 --> 00:04:33,560 ab, das ich hier erhalten 59 00:04:33,570 --> 00:04:38,120 habe Dieses Bild hier ist ein Pfad, der temporäre Pfad zum Bild. 60 00:04:38,160 --> 00:04:44,880 Hier verwende ich also tatsächlich ein Bild, das eine Zeichenfolge ist, und rufe split auf, um es durch Schrägstriche zu teilen, 61 00:04:44,880 --> 00:04:52,440 da dieser Pfad am Ende natürlich ein paar Schrägstriche enthält und split diese Zeichenfolge in ein Array von Zeichenfolgensegmenten konvertiert, in denen jedes 62 00:04:52,440 --> 00:04:58,620 Segment vorhanden ist ist ein Segment vor und nach einem solchen Schrägstrich in der Zeichenfolge und dort erhalte 63 00:04:59,040 --> 00:05:00,420 ich durch Aufrufen 64 00:05:00,420 --> 00:05:01,850 von Pop das letzte Segment. 65 00:05:01,860 --> 00:05:09,090 Dieser Code hier wirft also einen Blick auf unseren Bildpfad, teilt ihn durch Schrägstriche auf, die unseren gesamten Pfad dort 66 00:05:09,300 --> 00:05:13,140 ausmachen, und indem er das letzte Element platzt. Nun, was ist 67 00:05:13,140 --> 00:05:15,830 das letzte Element? Das ist unser 68 00:05:15,870 --> 00:05:26,060 Dateiname, richtig, wenn Sie einen Pfad wie einen Ordner / ein Bild haben. jpg, dann machen wir mit split ein Array 69 00:05:26,060 --> 00:05:34,880 mit einem Ordner und mit myimage. jpg und wenn wir pop aufrufen, erhalten wir 70 00:05:35,180 --> 00:05:36,920 myimage. jpg, 71 00:05:36,950 --> 00:05:39,250 das bekommen wir hier. 72 00:05:40,590 --> 00:05:42,630 Dies gibt uns also unseren Dateinamen 73 00:05:42,630 --> 00:05:49,300 zurück, dieses Code-Snippet hier und jetzt können wir dies hier an unseren Pfad anhängen, indem wir es einfach so hinzufügen. 74 00:05:49,320 --> 00:05:53,730 Dies generiert nun einen Pfad, der sowohl einen Ordner als auch den Dateinamen enthält. 75 00:05:53,730 --> 00:06:00,900 Hier möchte ich diese Datei verschieben, und jetzt können wir sie verschieben, indem wir auf FileSystem zugreifen. moveAsync. 76 00:06:00,990 --> 00:06:04,130 Dies ist eine Methode, mit der eine Datei von a nach b 77 00:06:04,260 --> 00:06:09,540 verschoben wird, und sie verwendet auch ein Versprechen, da das Verschieben dieser Datei etwas länger dauern kann und uns daher mitteilt, 78 00:06:09,540 --> 00:06:10,730 wann sie fertig ist. 79 00:06:11,750 --> 00:06:18,100 Jetzt nimmt asynchrone Bewegung ein Objekt mit zwei Informationen auf - von und zu dem ist wohl 80 00:06:18,140 --> 00:06:19,010 ziemlich einfach. 81 00:06:19,010 --> 00:06:25,070 Also ist von ist Bild, weil Bild der Pfad zum temporären Verzeichnis ist, also ist das von Ding, dort befindet 82 00:06:25,070 --> 00:06:32,290 sich die Datei derzeit und natürlich ist dies unser neuer Pfad. Nun, wie gesagt, dies gibt ein Versprechen 83 00:06:32,290 --> 00:06:36,420 zurück, damit wir darauf warten können und das war's. 84 00:06:36,430 --> 00:06:41,200 Jetzt sollten wir dies in einen try catch-Block einschließen, da dies fehlschlagen könnte, 85 00:06:41,200 --> 00:06:48,090 weil beispielsweise nicht genügend Speicherplatz auf dem Gerät vorhanden ist oder wir einen Berechtigungsfehler haben oder etwas anderes falsch ist. 86 00:06:48,160 --> 00:06:55,690 Wir sollten also auf jeden Fall versuchen, unsere Dateisystemaktionen abzufangen, da Operationen am Dateisystem immer fehlschlagen können und wir dann möglicherweise 87 00:06:55,690 --> 00:06:56,400 etwas 88 00:06:56,620 --> 00:06:59,520 tun möchten. Hier protokolliere ich den Fehler und 89 00:06:59,530 --> 00:07:04,680 wirf ihn erneut, aber natürlich können Sie dort auch andere Dinge tun Nun, Sie 90 00:07:04,690 --> 00:07:09,310 können dies auf Ihrem eigenen Analyseserver speichern, was auch immer Sie tun müssen. 91 00:07:09,610 --> 00:07:15,100 Jetzt möchten Sie dies möglicherweise auch in einer Komponente behandeln, um dort eine Warnung anzuzeigen. 92 00:07:15,100 --> 00:07:20,650 Ich werde es nicht tun, aber Sie würden es genauso behandeln, wie Sie beispielsweise HTTP-Fehler 93 00:07:20,650 --> 00:07:22,160 behandeln, was ich 94 00:07:22,200 --> 00:07:24,040 mir angesehen habe das HTTP-Modul. 95 00:07:24,040 --> 00:07:28,980 Hier gehen wir also davon aus, dass dies meistens funktioniert oder dass dies immer funktioniert und wir 96 00:07:29,050 --> 00:07:31,350 die Datei verschieben. Sobald es 97 00:07:31,420 --> 00:07:34,870 verschoben wurde, wissen wir, dass es sich im neuen 98 00:07:34,900 --> 00:07:41,140 Pfad befindet. Natürlich ist es der neue Pfad, den ich jetzt hier in meinen Ortsdaten 99 00:07:41,140 --> 00:07:46,320 oder in meinem Redux-Speicher speichern möchte. Das ist alles schön, dies sollte 100 00:07:46,330 --> 00:07:50,040 unser Bild in einem permanenten Verzeichnis speichern, aber was 101 00:07:50,140 --> 00:07:56,110 wir nicht tun, ist, dass wir unsere Daten selbst nicht an einem permanenten Ort speichern. 102 00:07:56,110 --> 00:08:01,510 Wir verwenden hier natürlich Redux und das bedeutet, dass es im Speicher gespeichert ist. Wenn wir jedoch unsere App 103 00:08:01,510 --> 00:08:08,010 schließen und neu starten, gehen alle unsere Daten verloren, da diese nicht auf dem Gerät, einem Server oder einer Datenbank gespeichert sind, 104 00:08:08,010 --> 00:08:12,730 sondern nur im Speicher Das ist aktiv, solange unsere App läuft und danach gelöscht wird. 105 00:08:12,730 --> 00:08:19,630 Als nächsten Schritt möchte ich Ihnen zeigen, wie Sie SQLite verwenden, eine On-Device-Datenbank, die sowohl unter iOS als auch unter Android 106 00:08:19,630 --> 00:08:25,360 verfügbar ist, um mehr als nur Dateien zu speichern, sondern auch unsere Daten wie Titel, Bildpfad 107 00:08:25,360 --> 00:08:26,800 und zu speichern bald.