1 00:00:02,090 --> 00:00:05,970 Per evitare che l'immagine venga eventualmente rimossa, dobbiamo 2 00:00:06,140 --> 00:00:11,180 memorizzarla in un percorso più permanente sul nostro filesystem del dispositivo locale. 3 00:00:11,180 --> 00:00:15,350 Ovviamente, possiamo anche caricarlo su un server ma abbiamo già parlato del servizio e così 4 00:00:15,410 --> 00:00:21,970 via, qui voglio concentrarmi su tutte le funzionalità del dispositivo nativo. Ora per lavorare con il nostro 5 00:00:22,100 --> 00:00:23,660 filesystem nativo, 6 00:00:23,690 --> 00:00:26,180 expo ci ha coperto, possiamo 7 00:00:26,270 --> 00:00:32,900 usare il pacchetto filesystem qui per farlo. Lo installi proprio come installi gli altri pacchetti 8 00:00:32,900 --> 00:00:34,320 nativi, con 9 00:00:34,320 --> 00:00:41,470 expo install expo-file-system, quindi facciamolo qui, expo install, di nuovo solo un wrapper intorno a npm install 10 00:00:41,510 --> 00:00:48,950 che potresti usare in alternativa, devi solo assicurarti di stai usando la versione giusta per la tua versione 11 00:00:48,950 --> 00:00:52,980 exk SDK che stai usando e con quella, l'abbiamo installata, 12 00:00:53,010 --> 00:00:56,000 ora possiamo spostare l'immagine dopo averla presa. 13 00:00:56,010 --> 00:00:59,080 Ora ci sono vari punti nell'app in cui 14 00:00:59,160 --> 00:01:04,080 potremmo farlo, potremmo farlo nel selettore di immagini subito dopo aver preso l'immagine ma 15 00:01:04,080 --> 00:01:09,720 a questo punto, non sappiamo ancora se in realtà invieremo il modulo, se manteniamo effettivamente quell'immagine. 16 00:01:09,720 --> 00:01:15,330 Quindi cosa succede se abbiamo appena scattato un'immagine qui ma poi scartiamo questo e torniamo indietro? 17 00:01:15,330 --> 00:01:20,460 Non voglio che l'immagine venga spostata in un posto permanente in quel caso, dovrebbe sicuramente essere 18 00:01:20,460 --> 00:01:24,300 ripulita e questo è il comportamento predefinito, quindi non voglio ancora spostarlo 19 00:01:24,300 --> 00:01:25,390 a questo punto, 20 00:01:25,740 --> 00:01:28,330 invece voglio spostarlo una volta inviato il modulo. 21 00:01:28,560 --> 00:01:32,610 Quindi potremmo farlo qui nella schermata del nuovo posto, nel gestore del luogo 22 00:01:32,610 --> 00:01:38,280 di salvataggio ma poi aggiungeremmo tutta questa logica del filesystem a questo componente che è possibile ma che aggiunge 23 00:01:38,280 --> 00:01:41,190 molta logica in questo componente che non voglio davvero 24 00:01:41,190 --> 00:01:43,930 ho lì, voglio mantenere questo componente relativamente snello. 25 00:01:44,280 --> 00:01:47,640 Un ottimo posto per questo, tuttavia, è il creatore di azioni. 26 00:01:47,730 --> 00:01:53,220 Lo abbiamo già usato in passato per avere effetti collaterali, come l'invio di richieste HTTP. 27 00:01:53,220 --> 00:01:58,680 Ora lo spostamento di un file è sostanzialmente la stessa categoria di cose che stiamo facendo, invece di inviare una richiesta a un 28 00:01:58,680 --> 00:01:59,180 server, 29 00:01:59,190 --> 00:02:00,200 stiamo spostando un file, 30 00:02:00,200 --> 00:02:01,620 beh non è poi così diverso. 31 00:02:03,390 --> 00:02:12,210 Quindi quindi in questo file qui, nei luoghi-azione. js file, importerò tutto come filesystem dal file system expo, 32 00:02:12,210 --> 00:02:19,500 quindi da questo nuovo pacchetto che abbiamo installato e qui in posizione aggiunta, ora userò questa sintassi alternativa 33 00:02:19,500 --> 00:02:26,970 di dispacciamento o di avere un creatore di azioni che utilizza Redux Thunk, dove noi restituire qui una 34 00:02:26,970 --> 00:02:34,230 funzione interna che riceve la funzione di invio come argomento in modo che in questa funzione interna, 35 00:02:34,230 --> 00:02:44,970 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 36 00:02:44,970 --> 00:02:50,670 ' farai un lavoro asincrono qui. Qui, ora voglio spostare 37 00:02:50,670 --> 00:02:53,030 il file, giusto? 38 00:02:53,220 --> 00:02:58,980 Quindi, per quello, voglio usare questo pacchetto di filesystem. Lo spostamento del file comporta in realtà un 39 00:02:58,980 --> 00:03:00,060 paio di cose. 40 00:03:00,060 --> 00:03:05,160 Prima di tutto, dobbiamo derivare il nuovo percorso del file e che 41 00:03:05,160 --> 00:03:12,270 dovrebbe ovviamente essere una directory più permanente. Per questo, possiamo usare il filesystem e lì, hai un paio di directory a cui puoi accedere. 42 00:03:12,270 --> 00:03:16,980 Hai la directory della cache che è in realtà la directory in cui il 43 00:03:16,980 --> 00:03:25,200 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 44 00:03:25,200 --> 00:03:28,080 ma hai anche la directory dei documenti, questa 45 00:03:28,080 --> 00:03:34,140 è la directory principale per tutti i file di cui l'app ha bisogno e che sono garantiti per sopravvivere. 46 00:03:34,140 --> 00:03:38,000 Ora quando disinstalli la tua app, anche questa cartella verrà cancellata, 47 00:03:38,010 --> 00:03:45,540 quindi questi file andranno persi ma fino ad allora, persisteranno attraverso i riavvii delle app, attraverso lunghe pause in cui le persone non 48 00:03:45,540 --> 00:03:47,070 hanno usato la tua 49 00:03:47,400 --> 00:03:49,470 app, quindi qui i file sopravvivranno. 50 00:03:50,220 --> 00:03:55,620 Quindi la directory dei documenti del filesystem è il percorso in cui voglio spostare il mio file e ora 51 00:03:55,620 --> 00:04:01,570 c'è una cosa importante da sapere, il tuo percorso deve anche includere il nome del file che vuoi usare in futuro. 52 00:04:01,710 --> 00:04:07,410 Ovviamente, quando prendi l'immagine ottieni anche un nome di file temporaneo, ma quando sposti un file, questo nome non viene effettivamente 53 00:04:07,410 --> 00:04:14,570 tenuto fuori dalla scatola, invece assumerà questo percorso come nome, per così dire. Pertanto, questo non dovrebbe essere solo un puntatore alla cartella 54 00:04:14,570 --> 00:04:18,050 in cui si desidera spostare il file, ma dovrebbe 55 00:04:18,150 --> 00:04:20,990 includere anche il nome del file. 56 00:04:21,060 --> 00:04:24,530 Ora, per questo, sono felice di mantenere il nome dell'immagine 57 00:04:24,540 --> 00:04:31,220 generato automaticamente, ovviamente ora potresti anche generare i tuoi nomi di immagini univoci qui, ma per quello, trarrò il 58 00:04:31,290 --> 00:04:33,560 nome del file dall'immagine che 59 00:04:33,570 --> 00:04:38,120 ho qui, tieni presente quell'immagine qui è un percorso, il percorso temporaneo all'immagine. 60 00:04:38,160 --> 00:04:44,880 Quindi qui, userò effettivamente un'immagine che è una stringa e chiamerò split su questa per dividerla per barre 61 00:04:44,880 --> 00:04:52,440 perché questo percorso ovviamente comporta un paio di barre alla fine e split converte questa stringa in una matrice di segmenti 62 00:04:52,440 --> 00:04:58,620 di stringa in cui ogni segmento è un segmento prima e dopo una tale barra nella stringa 63 00:04:59,040 --> 00:05:00,420 e lì chiamando 64 00:05:00,420 --> 00:05:01,850 pop, ottengo l'ultimo segmento. 65 00:05:01,860 --> 00:05:09,090 Quindi, ciò che questo codice fa qui è dare un'occhiata al nostro percorso di immagine, lo divide in barre che formano 66 00:05:09,300 --> 00:05:13,140 il nostro percorso completo lì e facendo scattare l'ultimo elemento, bene qual 67 00:05:13,140 --> 00:05:15,830 è l'ultimo elemento? Questo è il 68 00:05:15,870 --> 00:05:26,060 nome del nostro file, giusto, quindi se hai un percorso come somefolder / myimage. jpg, allora quello che facciamo con split è che otteniamo 69 00:05:26,060 --> 00:05:34,880 un array con qualche cartella e con myimage. jpg e chiamando pop su questo, otteniamo 70 00:05:35,180 --> 00:05:36,920 myimage. jpg, 71 00:05:36,950 --> 00:05:39,250 quindi è quello che arriviamo qui. 72 00:05:40,590 --> 00:05:42,630 Quindi questo ci restituirà il nostro 73 00:05:42,630 --> 00:05:49,300 nome di file, questo frammento di codice qui e ora possiamo aggiungere questo qui al nostro percorso semplicemente aggiungendolo in questo modo. 74 00:05:49,320 --> 00:05:53,730 Quindi ora questo genera un percorso che include sia una cartella che il nome del file. 75 00:05:53,730 --> 00:06:00,900 Qui è dove voglio spostare quel file e ora possiamo spostarlo accedendo a FileSystem. moveAsync. 76 00:06:00,990 --> 00:06:04,130 Questo è un metodo che sposta un file da aeb e 77 00:06:04,260 --> 00:06:09,540 usa anche una promessa perché lo spostamento di quel file può richiedere un po 'più di tempo e quindi ci 78 00:06:09,540 --> 00:06:10,730 dirà quando è finito. 79 00:06:11,750 --> 00:06:18,100 Adesso move async prende un oggetto con due informazioni: da e verso il quale è piuttosto 80 00:06:18,140 --> 00:06:19,010 semplice, immagino. 81 00:06:19,010 --> 00:06:25,070 Quindi da è immagine perché immagine è il percorso della directory temporanea, quindi è la cosa da, è lì che si 82 00:06:25,070 --> 00:06:32,290 trova il file e ovviamente è il nostro nuovo percorso, come questo. Ora, come ho detto, questo restituisce una 83 00:06:32,290 --> 00:06:36,420 promessa in modo che possiamo aspettare questo e basta. 84 00:06:36,430 --> 00:06:41,200 Ora dovremmo racchiuderlo in un blocco catch try perché ciò potrebbe non riuscire perché, 85 00:06:41,200 --> 00:06:48,090 ad esempio, non c'è abbastanza spazio sul dispositivo o in qualche modo abbiamo un errore di autorizzazioni o qualcos'altro è sbagliato. 86 00:06:48,160 --> 00:06:55,690 Quindi dovremmo assolutamente provare a catturare le azioni del nostro filesystem perché le operazioni sul filesystem possono sempre fallire e 87 00:06:55,690 --> 00:06:56,400 lì 88 00:06:56,620 --> 00:06:59,520 potremmo voler fare qualcosa, qui sto registrando 89 00:06:59,530 --> 00:07:04,680 l'errore e lo sto ricominciando, ma ovviamente potresti fare altre cose lì come beh, 90 00:07:04,690 --> 00:07:09,310 potresti memorizzarlo sul tuo server di analisi, qualunque cosa tu debba fare. 91 00:07:09,610 --> 00:07:15,100 Ora alla fine potresti voler gestire anche questo in un componente per mostrare un avviso lì, non 92 00:07:15,100 --> 00:07:20,650 lo farò ma lo gestiresti nello stesso modo in cui gestisci, ad esempio, gli errori HTTP che 93 00:07:20,650 --> 00:07:22,160 è qualcosa a cui 94 00:07:22,200 --> 00:07:24,040 ho dato un'occhiata il modulo HTTP. 95 00:07:24,040 --> 00:07:28,980 Quindi qui, supponiamo che funzionerà principalmente o che funzionerà sempre e stiamo spostando 96 00:07:29,050 --> 00:07:31,350 il file. Ora, una 97 00:07:31,420 --> 00:07:34,870 volta spostato, sappiamo che sarà nel nuovo percorso, 98 00:07:34,900 --> 00:07:41,140 quindi ovviamente è il nuovo percorso che ora voglio archiviare qui nei miei dati dei 99 00:07:41,140 --> 00:07:46,320 luoghi o nel mio negozio Redux. Va bene, questo dovrebbe archiviare la 100 00:07:46,330 --> 00:07:50,040 nostra immagine in una directory permanente, ma ciò che 101 00:07:50,140 --> 00:07:56,110 non stiamo facendo è che non stiamo memorizzando i nostri dati in un posto permanente. 102 00:07:56,110 --> 00:08:01,510 Ovviamente stiamo usando Redux qui e ciò significa che è archiviato in memoria ma ogni volta che chiudiamo e riavviamo 103 00:08:01,510 --> 00:08:08,010 la nostra app, tutti i nostri dati andranno persi perché non sono memorizzati sul dispositivo o su un server o in un database, è solo 104 00:08:08,010 --> 00:08:12,730 in memoria che è attivo fintanto che la nostra app è in esecuzione e, successivamente, viene cancellato. 105 00:08:12,730 --> 00:08:19,630 Quindi, come prossimo passo, voglio mostrarti come usare SQLite che è un database su dispositivo, entrambi disponibili su iOS e Android, per 106 00:08:19,630 --> 00:08:25,360 archiviare più di un semplice file ma anche per archiviare i nostri dati, come il titolo e il 107 00:08:25,360 --> 00:08:26,800 percorso dell'immagine e presto.