Pour éviter que l'image ne soit finalement supprimée, nous devons
la stocker dans un chemin plus permanent sur notre système de fichiers de périphérique local.
Bien sûr, nous pouvons également le télécharger sur un serveur, mais nous avons déjà parlé du service et ainsi
de suite, ici, je veux me concentrer sur toutes les capacités des appareils natifs. Maintenant, pour travailler avec notre système de fichiers
natif, expo nous
a couverts, nous pouvons utiliser le
package de système de fichiers ici pour le faire. Vous l'installez comme vous installez les autres packages natifs,
avec expo install
expo-file-system, alors faisons-le ici, expo install, encore une fois un wrapper autour de npm install que vous pouvez également
utiliser, vous avez juste besoin de vous assurer que vous utilisons la bonne version pour la version du SDK de
votre expo que vous utilisez et avec cela, nous l'avons installée,
maintenant nous pouvons déplacer l'image après l'avoir prise.
Maintenant, il existe différents endroits dans l'application où nous
pourrions le faire, nous pourrions le faire dans le sélecteur d'image juste après avoir pris l'image, mais
à ce stade, nous ne savons pas encore si nous allons réellement soumettre le formulaire, si nous gardons cette image.
Et si nous prenions juste une image ici, mais ensuite nous la rejetons et nous retournons?
Je ne veux pas que l'image soit déplacée à un endroit permanent dans ce cas, elle devrait certainement être nettoyée et
c'est le comportement par défaut, donc je ne veux pas encore la déplacer à ce
stade, mais je veux
la déplacer une fois que nous avons soumis le formulaire.
Par conséquent, nous pourrions le faire ici dans le nouvel écran de lieu, dans le gestionnaire de
lieu de sauvegarde, mais ensuite nous ajouterions toute cette logique de système de fichiers à ce composant, ce qui est possible mais qui
ajoute beaucoup de logique à ce composant que je ne veux pas
vraiment avoir là, je veux garder ce composant relativement maigre.
Cependant, le créateur d'action est un excellent endroit pour cela.
Nous l'avons déjà utilisé dans le passé pour avoir des effets secondaires, comme l'envoi de requêtes HTTP.
Maintenant, déplacer un fichier est essentiellement la même catégorie de choses que nous faisons, au lieu d'envoyer une demande à un serveur,
nous
déplaçons un fichier, eh
bien ce n'est pas si différent.
Donc donc dans ce dossier ici, dans les lieux-action. fichier js, je vais tout importer en tant que système de fichiers
à partir du système de fichiers expo, donc à partir de ce nouveau paquet que nous avons installé et ici
en plus, j'utiliserai maintenant cette syntaxe alternative de répartition ou d'avoir un créateur d'action qui utilise Redux Thunk, où nous
renvoie ici une fonction interne qui reçoit la fonction de répartition comme argument afin que dans cette fonction interne,
nous puissions distribuer cette action en appelant répartition ici et en passant notre objet d'action et j'ajouterai async ici afin que nous puissions utiliser async attendre parce que nous
' va faire un travail asynchrone ici. Ici, je veux maintenant déplacer
le fichier, non?
Donc, pour cela, je veux utiliser ce package de système de fichiers. Le déplacement du fichier implique en fait deux
ou trois choses.
Tout d'abord, nous devons dériver le nouveau chemin du fichier et cela
devrait bien sûr être un répertoire plus permanent. Pour cela, nous pouvons utiliser le système de fichiers et là, vous avez quelques répertoires auxquels vous pouvez accéder.
Vous avez le répertoire de cache qui est en fait le répertoire dans lequel le
fichier est déjà stocké, le répertoire de l'ensemble qui n'est pas vraiment un bon répertoire pour stocker les fichiers que votre application utilise non plus, mais
vous avez également obtenu le répertoire de document,
c'est le répertoire principal pour tous les fichiers dont votre application a besoin et qui sont garantis pour survivre.
Maintenant, lorsque vous désinstallez votre application, ce dossier sera également effacé,
donc ces fichiers sont perdus mais jusque-là, ils persisteront pendant les redémarrages de l'application, pendant de longues pauses où les gens n'ont
pas utilisé votre
application, donc ici les fichiers survivront.
Le répertoire de documents du système de fichiers est donc le chemin vers lequel je veux déplacer mon fichier et
maintenant il y a une chose importante à savoir, votre chemin doit également inclure le nom de fichier que vous souhaitez utiliser à l'avenir.
Bien sûr, vous obtenez également un nom de fichier temporaire lorsque vous prenez l'image, mais lorsque vous déplacez un fichier, ce nom n'est en
fait pas conservé, il prendra ce chemin ici comme un nom pour ainsi dire. Par conséquent, cela ne doit pas seulement être un pointeur sur
le dossier dans lequel vous souhaitez déplacer le fichier, il
doit également inclure le nom du fichier.
Maintenant, pour cela, je suis heureux de garder le nom de
l'image générée automatiquement, bien sûr, vous pouvez également générer vos propres noms d'image uniques ici, mais pour cela, je vais dériver le nom
du fichier de l'image que j'ai obtenue
ici, gardez à l'esprit cette image ici est un chemin, le chemin temporaire vers l'image.
Donc ici, je vais réellement utiliser l'image qui est une chaîne et appeler split sur cela pour le diviser par des
barres obliques parce que ce chemin implique bien sûr quelques barres obliques à la fin et que split convertit cette chaîne en un tableau de
segments de chaîne où chaque segment est un segment avant et après une telle barre oblique dans la chaîne et
là en appelant
pop, j'obtiens le dernier segment.
Donc, ce que fait ce code ici, c'est qu'il jette un œil à notre chemin d'image, le divise par des barres obliques qui composent notre
chemin complet là-bas et en faisant apparaître le dernier élément, eh bien quel
est le dernier élément? C'est notre nom
de fichier, à droite, donc si vous avez un chemin comme somefolder / myimage. jpg, alors ce que nous faisons avec split, c'est que nous
obtenons un tableau avec un dossier et avec myimage. jpg et en appelant pop à ce sujet, nous obtenons
myimage. jpg, c'est
donc ce que nous obtenons ici.
Donc, cela nous renverra notre nom
de fichier, cet extrait de code ici et maintenant nous pouvons l'ajouter ici à notre chemin en l'ajoutant simplement comme ceci.
Alors maintenant, cela génère un chemin d'accès qui comprend à la fois un dossier et ensuite le nom du fichier.
C'est là que je veux déplacer ce fichier et maintenant nous pouvons le déplacer en accédant à FileSystem. moveAsync.
C'est une méthode qui déplace un fichier de a vers b et elle
utilise également une promesse car le déplacement de ce fichier peut prendre un peu plus de temps et donc il nous dira
quand il sera terminé.
Maintenant, déplacer asynchrone prend un objet avec deux informations - de et vers lesquelles est assez simple
je suppose.
Donc, from est image parce que image est le chemin d'accès au répertoire temporaire, c'est donc la chose from, c'est là que le
fichier se trouve actuellement et, bien sûr, est notre nouveau chemin, comme celui-ci. Maintenant, comme je l'ai dit, cela renvoie une
promesse
afin que nous puissions attendre cela et c'est tout.
Maintenant, nous devons envelopper cela dans un bloc try catch car cela pourrait échouer car, par
exemple, il n'y a pas assez d'espace sur le périphérique ou d'une manière ou d'une autre, nous avons une erreur d'autorisations ou tout autre problème.
Donc, nous devons absolument essayer d'attraper nos actions sur le système de fichiers car les opérations sur le système de fichiers peuvent toujours échouer et là,
nous pourrions
alors vouloir faire quelque chose, ici, je journalise l'erreur
et je la rejette, mais bien sûr, vous pouvez faire d'autres choses là-bas comme Eh bien, vous pouvez
en quelque sorte les stocker sur votre propre serveur d'analyse, quoi que vous ayez à faire.
Maintenant, vous voudrez peut-être finalement gérer cela dans un composant pour y afficher une alerte, je ne
le ferai pas, mais vous le feriez de la même manière que par exemple pour les erreurs
HTTP, ce que j'ai
examiné dans le module HTTP.
Donc ici, nous supposons que cela fonctionnera principalement ou que cela fonctionnera toujours et nous
déplaçons le fichier. Maintenant, une fois
qu'il a été déplacé, nous savons qu'il sera dans le
nouveau chemin, donc bien sûr c'est le nouveau chemin que je veux maintenant stocker ici dans mes données
de lieu ou dans mon magasin Redux. C'est très bien, cela devrait stocker
notre image dans un répertoire permanent mais ce que nous
ne faisons pas, c'est que nous ne stockons pas nos données elles-mêmes dans un endroit permanent.
Nous utilisons bien sûr Redux ici et cela signifie qu'il est stocké en mémoire mais chaque fois que nous fermons et redémarrons
notre application, toutes nos données seront perdues car elles ne sont pas stockées sur l'appareil ou sur un serveur ou dans une base de données, elles
sont juste en mémoire qui est actif aussi longtemps que notre application fonctionne et qui est ensuite effacée.
Donc, dans une prochaine étape, je veux vous montrer comment utiliser SQLite qui est une base de données sur l'appareil, à la fois disponible sur
iOS et Android, pour stocker plus que des fichiers mais également pour stocker nos données, comme le titre et le
chemin de l'image et bientôt.