Um zu vermeiden, dass das Image schließlich entfernt wird,
müssen wir es in einem dauerhafteren Pfad auf unserem lokalen Gerätedateisystem speichern.
Natürlich können wir es auch auf einen Server hochladen, aber wir haben bereits über Service
usw. gesprochen. Hier möchte ich mich auf alle nativen Gerätefunktionen konzentrieren. Um mit unserem nativen Dateisystem zu arbeiten,
hat expo
uns abgedeckt. Wir können das
Dateisystempaket hier verwenden, um dies zu tun. Sie installieren es genauso wie Sie die anderen nativen
Pakete mit expo
install expo-file-system installieren. Lassen Sie uns dies hier tun, expo install, wieder nur einen Wrapper um npm install, den
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
verwenden, und damit haben wir diese installiert. Jetzt können wir das
Image verschieben, nachdem wir es aufgenommen haben.
Jetzt gibt es verschiedene Stellen in der App, an
denen wir dies tun können. Wir können dies in der Bildauswahl direkt nach der Aufnahme tun, aber
zu diesem Zeitpunkt wissen wir noch nicht, ob wir das Formular tatsächlich senden werden, wenn Wir behalten dieses Bild tatsächlich.
Was ist, wenn wir hier nur ein Bild aufgenommen haben, dieses dann aber verwerfen und zurückgehen?
Ich möchte in diesem Fall nicht, dass das Bild an einen dauerhaften Ort verschoben wird. Es sollte auf jeden
Fall bereinigt werden. Dies ist das Standardverhalten. Daher möchte ich es an dieser Stelle
noch nicht verschieben,
sondern es verschieben Sobald wir das Formular eingereicht haben.
Daher könnten wir es hier im neuen Ortsbildschirm, im Handler zum Speichern von
Plätzen, tun, aber dann würden wir dieser Komponente all diese Dateisystemlogik hinzufügen, was möglich ist, aber dieser Komponente
viel Logik hinzufügt, was ich eigentlich nicht möchte Dort
möchte ich diese Komponente relativ schlank halten.
Ein großartiger Ort dafür ist jedoch der Action Creator.
Wir haben dies bereits in der Vergangenheit verwendet, um Nebenwirkungen wie das Senden von HTTP-Anfragen zu haben.
Das Verschieben einer Datei ist im Grunde die gleiche Kategorie, die wir ausführen. Anstatt eine Anfrage an einen Server zu senden,
verschieben
wir eine Datei. Nun,
es ist nicht so anders.
Also also in dieser Datei hier, in der Ortsaktion. js Datei, ich werde alles als Dateisystem aus dem Expo-Dateisystem
importieren, also werde ich von diesem neuen Paket, das wir installiert haben, und hier zusätzlich diese alternative
Syntax des Versendens oder eines Aktionserstellers verwenden, der Redux Thunk verwendet, wo wir Geben Sie hier eine interne
Funktion zurück, die die Versandfunktion als Argument empfängt, damit wir in dieser internen Funktion diese Aktion
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 '
Ich werde hier asynchrone Arbeit leisten. Hier möchte ich jetzt die
Datei verschieben, oder?
Dafür möchte ich dieses Dateisystempaket verwenden. Das Verschieben der Datei beinhaltet nun
einige Dinge.
Zunächst müssen wir den neuen Pfad der Datei ableiten, und das
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.
Sie haben das Cache-Verzeichnis, in dem die Datei bereits gespeichert
ist, das Bundle-Verzeichnis, das kein wirklich gutes Verzeichnis zum Speichern von Dateien ist, die Ihre App verwendet,
aber Sie haben auch das
Dokumentverzeichnis Hauptverzeichnis für alle Dateien, die Ihre App benötigt und die garantiert überleben.
Wenn Sie Ihre App deinstallieren, wird dieser Ordner ebenfalls gelöscht,
sodass diese Dateien verloren gehen. Bis dahin bleiben sie jedoch bei App-Neustarts und langen Pausen bestehen, in denen Benutzer Ihre
App nicht verwendet
haben. Hier überleben die Dateien.
Das Dateisystem-Dokumentverzeichnis ist also der Pfad, in den ich meine Datei verschieben möchte, und jetzt ist
eine wichtige Sache zu wissen: Ihr Pfad muss auch den Dateinamen enthalten, den Sie in Zukunft verwenden möchten.
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
aus dem Kasten herausgehalten, sondern nimmt diesen Pfad hier sozusagen als Namen an. Daher sollte dies nicht nur ein Zeiger auf
den Ordner sein, in den Sie die Datei
verschieben möchten, sondern auch den Dateinamen.
Dafür bin ich glücklich, den automatisch generierten Bildnamen beizubehalten. Natürlich
können Sie jetzt auch hier Ihre eigenen eindeutigen Bildnamen generieren, aber dafür leite ich den Dateinamen aus dem Bild
ab, das ich hier erhalten
habe Dieses Bild hier ist ein Pfad, der temporäre Pfad zum Bild.
Hier verwende ich also tatsächlich ein Bild, das eine Zeichenfolge ist, und rufe split auf, um es durch Schrägstriche zu teilen,
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
Segment vorhanden ist ist ein Segment vor und nach einem solchen Schrägstrich in der Zeichenfolge und dort erhalte
ich durch Aufrufen
von Pop das letzte Segment.
Dieser Code hier wirft also einen Blick auf unseren Bildpfad, teilt ihn durch Schrägstriche auf, die unseren gesamten Pfad dort
ausmachen, und indem er das letzte Element platzt. Nun, was ist
das letzte Element? Das ist unser
Dateiname, richtig, wenn Sie einen Pfad wie einen Ordner / ein Bild haben. jpg, dann machen wir mit split ein Array
mit einem Ordner und mit myimage. jpg und wenn wir pop aufrufen, erhalten wir
myimage. jpg,
das bekommen wir hier.
Dies gibt uns also unseren Dateinamen
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.
Dies generiert nun einen Pfad, der sowohl einen Ordner als auch den Dateinamen enthält.
Hier möchte ich diese Datei verschieben, und jetzt können wir sie verschieben, indem wir auf FileSystem zugreifen. moveAsync.
Dies ist eine Methode, mit der eine Datei von a nach b
verschoben wird, und sie verwendet auch ein Versprechen, da das Verschieben dieser Datei etwas länger dauern kann und uns daher mitteilt,
wann sie fertig ist.
Jetzt nimmt asynchrone Bewegung ein Objekt mit zwei Informationen auf - von und zu dem ist wohl
ziemlich einfach.
Also ist von ist Bild, weil Bild der Pfad zum temporären Verzeichnis ist, also ist das von Ding, dort befindet
sich die Datei derzeit und natürlich ist dies unser neuer Pfad. Nun, wie gesagt, dies gibt ein Versprechen
zurück, damit wir darauf warten können und das war's.
Jetzt sollten wir dies in einen try catch-Block einschließen, da dies fehlschlagen könnte,
weil beispielsweise nicht genügend Speicherplatz auf dem Gerät vorhanden ist oder wir einen Berechtigungsfehler haben oder etwas anderes falsch ist.
Wir sollten also auf jeden Fall versuchen, unsere Dateisystemaktionen abzufangen, da Operationen am Dateisystem immer fehlschlagen können und wir dann möglicherweise
etwas
tun möchten. Hier protokolliere ich den Fehler und
wirf ihn erneut, aber natürlich können Sie dort auch andere Dinge tun Nun, Sie
können dies auf Ihrem eigenen Analyseserver speichern, was auch immer Sie tun müssen.
Jetzt möchten Sie dies möglicherweise auch in einer Komponente behandeln, um dort eine Warnung anzuzeigen.
Ich werde es nicht tun, aber Sie würden es genauso behandeln, wie Sie beispielsweise HTTP-Fehler
behandeln, was ich
mir angesehen habe das HTTP-Modul.
Hier gehen wir also davon aus, dass dies meistens funktioniert oder dass dies immer funktioniert und wir
die Datei verschieben. Sobald es
verschoben wurde, wissen wir, dass es sich im neuen
Pfad befindet. Natürlich ist es der neue Pfad, den ich jetzt hier in meinen Ortsdaten
oder in meinem Redux-Speicher speichern möchte. Das ist alles schön, dies sollte
unser Bild in einem permanenten Verzeichnis speichern, aber was
wir nicht tun, ist, dass wir unsere Daten selbst nicht an einem permanenten Ort speichern.
Wir verwenden hier natürlich Redux und das bedeutet, dass es im Speicher gespeichert ist. Wenn wir jedoch unsere App
schließen und neu starten, gehen alle unsere Daten verloren, da diese nicht auf dem Gerät, einem Server oder einer Datenbank gespeichert sind,
sondern nur im Speicher Das ist aktiv, solange unsere App läuft und danach gelöscht wird.
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
verfügbar ist, um mehr als nur Dateien zu speichern, sondern auch unsere Daten wie Titel, Bildpfad
und zu speichern bald.