Para evitar que la imagen finalmente se elimine, debemos almacenarla
en una ruta más permanente en nuestro sistema de archivos del dispositivo local.
Por supuesto, también podemos subirlo a un servidor, pero ya hablamos sobre el servicio y
demás, aquí quiero centrarme en todas las capacidades nativas del dispositivo. Ahora, para trabajar con nuestro sistema de archivos
nativo, expo nos
tiene cubiertos, podemos usar el
paquete del sistema de archivos aquí para hacerlo. Lo instala al igual que instala los otros paquetes
nativos, con expo
install expo-file-system, así que hagamos eso aquí, expo install, nuevamente solo un contenedor alrededor de npm install que podría
usar alternativamente, solo necesita asegurarse de que está utilizando la versión correcta para su versión SDK de expo que está
utilizando y con eso, lo tenemos instalado, ahora podemos mover
la imagen después de que la tomamos.
Ahora hay varios lugares en la aplicación donde podríamos
hacer eso, podríamos hacerlo en el selector de imágenes justo después de tomar la imagen,
pero en este momento, aún no sabemos si realmente enviaremos el formulario, si De hecho, conservamos esa imagen.
Entonces, ¿qué pasa si tomamos una imagen aquí pero luego descartamos esto y volvemos?
No quiero que la imagen se mueva a un lugar permanente en ese caso, definitivamente debería limpiarse y
ese es el comportamiento predeterminado, por lo que no quiero moverla en este punto
todavía, en cambio
quiero moverla Una vez que hayamos enviado el formulario.
Por lo tanto, podríamos hacerlo aquí en la nueva pantalla de lugar, en el controlador
de guardar lugar, pero luego agregaríamos toda esta lógica del sistema de archivos a este componente, lo cual es posible pero
que agrega mucha lógica a este componente que realmente no
quiero tengo allí, quiero mantener este componente relativamente delgado.
Sin embargo, un gran lugar para esto es el creador de la acción.
Ya lo usamos en el pasado para tener efectos secundarios, como enviar solicitudes HTTP.
Ahora mover un archivo es básicamente la misma categoría de cosas que estamos haciendo, en lugar de enviar una solicitud a
un
servidor, estamos moviendo un
archivo, bueno, no es tan diferente.
Por lo tanto, en este archivo aquí, en la acción de lugares. js, importaré todo como sistema de archivos desde el sistema de
archivos de la expo, así que desde este nuevo paquete que instalamos y aquí, además, usaré esta sintaxis
alternativa de despacho o de tener un creador de acciones que utilice Redux Thunk, donde devuelve una función
interna aquí que recibe la función de despacho como argumento para que en esta función interna, podamos
despachar esta acción llamando a despachar aquí y pasando nuestro objeto de acción y agregaré asíncrono aquí para que podamos usar asíncrono aguarde porque nosotros ' vamos
a hacer un trabajo asincrónico aquí. Aquí, ahora quiero mover
el archivo, ¿verdad?
Entonces, para eso, quiero usar este paquete de sistema de archivos. Ahora mover el archivo en realidad implica un
par de cosas.
En primer lugar, necesitamos derivar la nueva ruta del archivo y, por
supuesto, debería ser un directorio más permanente. Para eso, podemos usar el sistema de archivos y allí, tiene un par de directorios a los que puede acceder.
Obtuviste el directorio de caché que en realidad es el directorio donde el archivo
ya está almacenado fuera de la caja, el directorio de paquetes que no es realmente un buen directorio para almacenar archivos que tu aplicación usa,
pero también obtuviste el directorio de documentos,
este es el directorio principal para cualquier archivo que su aplicación necesite y que esté garantizado para sobrevivir.
Ahora, cuando desinstale su aplicación, esta carpeta también se borrará, por lo
que estos archivos se perderán, pero hasta entonces, persistirán en los reinicios de la aplicación, en largas pausas donde las personas no han
usado su aplicación, por
lo que aquí los archivos sobrevivirán.
Por lo tanto, el directorio de documentos del sistema de archivos es la ruta a la que quiero mover mi archivo
y ahora hay una cosa importante que debe saber, su ruta también debe incluir el nombre de archivo que desea usar en el futuro.
Por supuesto, también obtiene un nombre de archivo temporal cuando toma la imagen, pero cuando mueve un archivo, este nombre no se mantiene fuera
de la caja, sino que asumirá esta ruta aquí como un nombre, por así decirlo. Por lo tanto, esto no solo debe ser un puntero en
la carpeta a la que desea mover el archivo, sino
que también debe incluir el nombre del archivo.
Ahora, por eso, estoy feliz de mantener el nombre de la
imagen autogenerada, por supuesto, ahora también podría generar sus propios nombres de imagen únicos, pero para eso, derivaré el nombre del archivo
de la imagen que obtuve aquí,
tenga en cuenta esa imagen aquí es un camino, el camino temporal a la imagen.
Así que aquí, en realidad usaré una imagen que es una cadena y llamaré a dividir en esto para dividirlo por
barras porque esta ruta, por supuesto, implica un par de barras al final y dividir convierte esta cadena en una matriz de segmentos de
cadena donde cada segmento es un segmento antes y después de una barra tan grande en la cadena y
allí al llamar
pop, obtengo el último segmento.
Entonces, lo que hace este código aquí es echar un vistazo a nuestra ruta de imagen, dividirlo en barras que hacen nuestra
ruta completa allí y al hacer estallar el último elemento, ¿cuál es
el último elemento? Ese es nuestro
nombre de archivo, correcto, así que si tiene una ruta como somefolder / myimage. jpg, entonces lo que hacemos con split es obtener una
matriz con alguna carpeta y con myimage. jpg y llamando pop en esto, obtenemos
myimage. jpg, así
que eso es lo que tenemos aquí.
Así que esto nos devolverá nuestro
nombre de archivo, este fragmento de código aquí y ahora podemos agregar esto aquí a nuestra ruta simplemente agregándolo así.
Así que ahora esto genera una ruta que incluye una carpeta y luego el nombre del archivo.
Aquí es donde quiero mover ese archivo y ahora podemos moverlo accediendo a FileSystem. moveAsync.
Ese es un método que mueve un archivo de a a b
y también utiliza una promesa porque mover ese archivo puede llevar un poco más de tiempo y, por lo tanto, nos
dirá cuándo está hecho.
Ahora mover asíncrono toma un objeto con dos piezas de información, desde y hacia la cual es bastante
sencillo, supongo.
Entonces, es de imagen porque la imagen es la ruta al directorio temporal, así que es de la cosa, ahí es donde
se encuentra actualmente el archivo y, por supuesto, es nuestra nueva ruta, así. Ahora, como dije, esto devuelve una promesa
para que podamos esperar esto y eso es todo.
Ahora deberíamos envolver esto en un bloque try catch porque esto podría fallar porque, por
ejemplo, no hay suficiente espacio en el dispositivo o de alguna manera tenemos un error de permisos o cualquier otra cosa está mal.
Así que definitivamente deberíamos tratar de detectar nuestras acciones del sistema de archivos porque las operaciones en el sistema de archivos siempre pueden fallar y
allí
podríamos querer hacer algo, aquí estoy registrando el error
y lo estoy volviendo a lanzar pero, por supuesto, podría hacer otras cosas allí como bueno, podrías
almacenar esto en tu propio servidor de análisis, sea lo que sea que necesites hacer.
Ahora, en última instancia, es posible que desee manejar esto en un componente también para mostrar una alerta allí,
no lo haré, pero lo manejaría de la misma manera que lo hace, por ejemplo, manejar los errores HTTP,
que es algo que
eché un vistazo en El módulo HTTP.
Así que aquí, estamos asumiendo que esto funcionará principalmente o que esto siempre funcionará y estamos
moviendo el archivo. Ahora, una
vez que se movió, sabemos que estará en la
nueva ruta, por lo que es la nueva ruta que ahora quiero almacenar aquí en mis datos
de lugar o en mi tienda Redux. Eso está muy bien, esto debería
almacenar nuestra imagen en un directorio permanente, pero lo
que no estamos haciendo es que no estamos almacenando nuestros datos en un lugar permanente.
Por supuesto, estamos usando Redux aquí y eso significa que está almacenado en la memoria, pero cada vez que cerramos y
reiniciamos nuestra aplicación, todos nuestros datos se perderán porque no están almacenados en el dispositivo o en un servidor o en una base de datos,
solo están en la memoria que está activo mientras nuestra aplicación se ejecute y luego se borre.
Entonces, como siguiente paso, quiero mostrarle cómo usar SQLite, que es una base de datos en el dispositivo, disponible en iOS y Android,
para almacenar más que solo archivos, pero también almacenar nuestros datos, como el título y la ruta de
la imagen y pronto.