Per evitare che l'immagine venga eventualmente rimossa, dobbiamo
memorizzarla in un percorso più permanente sul nostro filesystem del dispositivo locale.
Ovviamente, possiamo anche caricarlo su un server ma abbiamo già parlato del servizio e così
via, qui voglio concentrarmi su tutte le funzionalità del dispositivo nativo. Ora per lavorare con il nostro
filesystem nativo,
expo ci ha coperto, possiamo
usare il pacchetto filesystem qui per farlo. Lo installi proprio come installi gli altri pacchetti
nativi, con
expo install expo-file-system, quindi facciamolo qui, expo install, di nuovo solo un wrapper intorno a npm install
che potresti usare in alternativa, devi solo assicurarti di stai usando la versione giusta per la tua versione
exk SDK che stai usando e con quella, l'abbiamo installata,
ora possiamo spostare l'immagine dopo averla presa.
Ora ci sono vari punti nell'app in cui
potremmo farlo, potremmo farlo nel selettore di immagini subito dopo aver preso l'immagine ma
a questo punto, non sappiamo ancora se in realtà invieremo il modulo, se manteniamo effettivamente quell'immagine.
Quindi cosa succede se abbiamo appena scattato un'immagine qui ma poi scartiamo questo e torniamo indietro?
Non voglio che l'immagine venga spostata in un posto permanente in quel caso, dovrebbe sicuramente essere
ripulita e questo è il comportamento predefinito, quindi non voglio ancora spostarlo
a questo punto,
invece voglio spostarlo una volta inviato il modulo.
Quindi potremmo farlo qui nella schermata del nuovo posto, nel gestore del luogo
di salvataggio ma poi aggiungeremmo tutta questa logica del filesystem a questo componente che è possibile ma che aggiunge
molta logica in questo componente che non voglio davvero
ho lì, voglio mantenere questo componente relativamente snello.
Un ottimo posto per questo, tuttavia, è il creatore di azioni.
Lo abbiamo già usato in passato per avere effetti collaterali, come l'invio di richieste HTTP.
Ora lo spostamento di un file è sostanzialmente la stessa categoria di cose che stiamo facendo, invece di inviare una richiesta a un
server,
stiamo spostando un file,
beh non è poi così diverso.
Quindi quindi in questo file qui, nei luoghi-azione. js file, importerò tutto come filesystem dal file system expo,
quindi da questo nuovo pacchetto che abbiamo installato e qui in posizione aggiunta, ora userò questa sintassi alternativa
di dispacciamento o di avere un creatore di azioni che utilizza Redux Thunk, dove noi restituire qui una
funzione interna che riceve la funzione di invio come argomento in modo che in questa funzione interna,
possiamo inviare questa azione chiamando invio qui e passando il nostro oggetto azione e aggiungeremo asincrono qui in modo da poter usare asincrono attendere perché noi
' farai un lavoro asincrono qui. Qui, ora voglio spostare
il file, giusto?
Quindi, per quello, voglio usare questo pacchetto di filesystem. Lo spostamento del file comporta in realtà un
paio di cose.
Prima di tutto, dobbiamo derivare il nuovo percorso del file e che
dovrebbe ovviamente essere una directory più permanente. Per questo, possiamo usare il filesystem e lì, hai un paio di directory a cui puoi accedere.
Hai la directory della cache che è in realtà la directory in cui il
file è già archiviato fuori dalla scatola, la directory del bundle che non è davvero una buona directory per l'archiviazione dei file utilizzati dalla tua app
ma hai anche la directory dei documenti, questa
è la directory principale per tutti i file di cui l'app ha bisogno e che sono garantiti per sopravvivere.
Ora quando disinstalli la tua app, anche questa cartella verrà cancellata,
quindi questi file andranno persi ma fino ad allora, persisteranno attraverso i riavvii delle app, attraverso lunghe pause in cui le persone non
hanno usato la tua
app, quindi qui i file sopravvivranno.
Quindi la directory dei documenti del filesystem è il percorso in cui voglio spostare il mio file e ora
c'è una cosa importante da sapere, il tuo percorso deve anche includere il nome del file che vuoi usare in futuro.
Ovviamente, quando prendi l'immagine ottieni anche un nome di file temporaneo, ma quando sposti un file, questo nome non viene effettivamente
tenuto fuori dalla scatola, invece assumerà questo percorso come nome, per così dire. Pertanto, questo non dovrebbe essere solo un puntatore alla cartella
in cui si desidera spostare il file, ma dovrebbe
includere anche il nome del file.
Ora, per questo, sono felice di mantenere il nome dell'immagine
generato automaticamente, ovviamente ora potresti anche generare i tuoi nomi di immagini univoci qui, ma per quello, trarrò il
nome del file dall'immagine che
ho qui, tieni presente quell'immagine qui è un percorso, il percorso temporaneo all'immagine.
Quindi qui, userò effettivamente un'immagine che è una stringa e chiamerò split su questa per dividerla per barre
perché questo percorso ovviamente comporta un paio di barre alla fine e split converte questa stringa in una matrice di segmenti
di stringa in cui ogni segmento è un segmento prima e dopo una tale barra nella stringa
e lì chiamando
pop, ottengo l'ultimo segmento.
Quindi, ciò che questo codice fa qui è dare un'occhiata al nostro percorso di immagine, lo divide in barre che formano
il nostro percorso completo lì e facendo scattare l'ultimo elemento, bene qual
è l'ultimo elemento? Questo è il
nome del nostro file, giusto, quindi se hai un percorso come somefolder / myimage. jpg, allora quello che facciamo con split è che otteniamo
un array con qualche cartella e con myimage. jpg e chiamando pop su questo, otteniamo
myimage. jpg,
quindi è quello che arriviamo qui.
Quindi questo ci restituirà il nostro
nome di file, questo frammento di codice qui e ora possiamo aggiungere questo qui al nostro percorso semplicemente aggiungendolo in questo modo.
Quindi ora questo genera un percorso che include sia una cartella che il nome del file.
Qui è dove voglio spostare quel file e ora possiamo spostarlo accedendo a FileSystem. moveAsync.
Questo è un metodo che sposta un file da aeb e
usa anche una promessa perché lo spostamento di quel file può richiedere un po 'più di tempo e quindi ci
dirà quando è finito.
Adesso move async prende un oggetto con due informazioni: da e verso il quale è piuttosto
semplice, immagino.
Quindi da è immagine perché immagine è il percorso della directory temporanea, quindi è la cosa da, è lì che si
trova il file e ovviamente è il nostro nuovo percorso, come questo. Ora, come ho detto, questo restituisce una
promessa in modo che possiamo aspettare questo e basta.
Ora dovremmo racchiuderlo in un blocco catch try perché ciò potrebbe non riuscire perché,
ad esempio, non c'è abbastanza spazio sul dispositivo o in qualche modo abbiamo un errore di autorizzazioni o qualcos'altro è sbagliato.
Quindi dovremmo assolutamente provare a catturare le azioni del nostro filesystem perché le operazioni sul filesystem possono sempre fallire e
lì
potremmo voler fare qualcosa, qui sto registrando
l'errore e lo sto ricominciando, ma ovviamente potresti fare altre cose lì come beh,
potresti memorizzarlo sul tuo server di analisi, qualunque cosa tu debba fare.
Ora alla fine potresti voler gestire anche questo in un componente per mostrare un avviso lì, non
lo farò ma lo gestiresti nello stesso modo in cui gestisci, ad esempio, gli errori HTTP che
è qualcosa a cui
ho dato un'occhiata il modulo HTTP.
Quindi qui, supponiamo che funzionerà principalmente o che funzionerà sempre e stiamo spostando
il file. Ora, una
volta spostato, sappiamo che sarà nel nuovo percorso,
quindi ovviamente è il nuovo percorso che ora voglio archiviare qui nei miei dati dei
luoghi o nel mio negozio Redux. Va bene, questo dovrebbe archiviare la
nostra immagine in una directory permanente, ma ciò che
non stiamo facendo è che non stiamo memorizzando i nostri dati in un posto permanente.
Ovviamente stiamo usando Redux qui e ciò significa che è archiviato in memoria ma ogni volta che chiudiamo e riavviamo
la nostra app, tutti i nostri dati andranno persi perché non sono memorizzati sul dispositivo o su un server o in un database, è solo
in memoria che è attivo fintanto che la nostra app è in esecuzione e, successivamente, viene cancellato.
Quindi, come prossimo passo, voglio mostrarti come usare SQLite che è un database su dispositivo, entrambi disponibili su iOS e Android, per
archiviare più di un semplice file ma anche per archiviare i nostri dati, come il titolo e il
percorso dell'immagine e presto.