1 00:00:02,090 --> 00:00:05,970 Para evitar que la imagen finalmente se elimine, debemos almacenarla 2 00:00:06,140 --> 00:00:11,180 en una ruta más permanente en nuestro sistema de archivos del dispositivo local. 3 00:00:11,180 --> 00:00:15,350 Por supuesto, también podemos subirlo a un servidor, pero ya hablamos sobre el servicio y 4 00:00:15,410 --> 00:00:21,970 demás, aquí quiero centrarme en todas las capacidades nativas del dispositivo. Ahora, para trabajar con nuestro sistema de archivos 5 00:00:22,100 --> 00:00:23,660 nativo, expo nos 6 00:00:23,690 --> 00:00:26,180 tiene cubiertos, podemos usar el 7 00:00:26,270 --> 00:00:32,900 paquete del sistema de archivos aquí para hacerlo. Lo instala al igual que instala los otros paquetes 8 00:00:32,900 --> 00:00:34,320 nativos, con expo 9 00:00:34,320 --> 00:00:41,470 install expo-file-system, así que hagamos eso aquí, expo install, nuevamente solo un contenedor alrededor de npm install que podría 10 00:00:41,510 --> 00:00:48,950 usar alternativamente, solo necesita asegurarse de que está utilizando la versión correcta para su versión SDK de expo que está 11 00:00:48,950 --> 00:00:52,980 utilizando y con eso, lo tenemos instalado, ahora podemos mover 12 00:00:53,010 --> 00:00:56,000 la imagen después de que la tomamos. 13 00:00:56,010 --> 00:00:59,080 Ahora hay varios lugares en la aplicación donde podríamos 14 00:00:59,160 --> 00:01:04,080 hacer eso, podríamos hacerlo en el selector de imágenes justo después de tomar la imagen, 15 00:01:04,080 --> 00:01:09,720 pero en este momento, aún no sabemos si realmente enviaremos el formulario, si De hecho, conservamos esa imagen. 16 00:01:09,720 --> 00:01:15,330 Entonces, ¿qué pasa si tomamos una imagen aquí pero luego descartamos esto y volvemos? 17 00:01:15,330 --> 00:01:20,460 No quiero que la imagen se mueva a un lugar permanente en ese caso, definitivamente debería limpiarse y 18 00:01:20,460 --> 00:01:24,300 ese es el comportamiento predeterminado, por lo que no quiero moverla en este punto 19 00:01:24,300 --> 00:01:25,390 todavía, en cambio 20 00:01:25,740 --> 00:01:28,330 quiero moverla Una vez que hayamos enviado el formulario. 21 00:01:28,560 --> 00:01:32,610 Por lo tanto, podríamos hacerlo aquí en la nueva pantalla de lugar, en el controlador 22 00:01:32,610 --> 00:01:38,280 de guardar lugar, pero luego agregaríamos toda esta lógica del sistema de archivos a este componente, lo cual es posible pero 23 00:01:38,280 --> 00:01:41,190 que agrega mucha lógica a este componente que realmente no 24 00:01:41,190 --> 00:01:43,930 quiero tengo allí, quiero mantener este componente relativamente delgado. 25 00:01:44,280 --> 00:01:47,640 Sin embargo, un gran lugar para esto es el creador de la acción. 26 00:01:47,730 --> 00:01:53,220 Ya lo usamos en el pasado para tener efectos secundarios, como enviar solicitudes HTTP. 27 00:01:53,220 --> 00:01:58,680 Ahora mover un archivo es básicamente la misma categoría de cosas que estamos haciendo, en lugar de enviar una solicitud a 28 00:01:58,680 --> 00:01:59,180 un 29 00:01:59,190 --> 00:02:00,200 servidor, estamos moviendo un 30 00:02:00,200 --> 00:02:01,620 archivo, bueno, no es tan diferente. 31 00:02:03,390 --> 00:02:12,210 Por lo tanto, en este archivo aquí, en la acción de lugares. js, importaré todo como sistema de archivos desde el sistema de 32 00:02:12,210 --> 00:02:19,500 archivos de la expo, así que desde este nuevo paquete que instalamos y aquí, además, usaré esta sintaxis 33 00:02:19,500 --> 00:02:26,970 alternativa de despacho o de tener un creador de acciones que utilice Redux Thunk, donde devuelve una función 34 00:02:26,970 --> 00:02:34,230 interna aquí que recibe la función de despacho como argumento para que en esta función interna, podamos 35 00:02:34,230 --> 00:02:44,970 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 36 00:02:44,970 --> 00:02:50,670 a hacer un trabajo asincrónico aquí. Aquí, ahora quiero mover 37 00:02:50,670 --> 00:02:53,030 el archivo, ¿verdad? 38 00:02:53,220 --> 00:02:58,980 Entonces, para eso, quiero usar este paquete de sistema de archivos. Ahora mover el archivo en realidad implica un 39 00:02:58,980 --> 00:03:00,060 par de cosas. 40 00:03:00,060 --> 00:03:05,160 En primer lugar, necesitamos derivar la nueva ruta del archivo y, por 41 00:03:05,160 --> 00:03:12,270 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. 42 00:03:12,270 --> 00:03:16,980 Obtuviste el directorio de caché que en realidad es el directorio donde el archivo 43 00:03:16,980 --> 00:03:25,200 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, 44 00:03:25,200 --> 00:03:28,080 pero también obtuviste el directorio de documentos, 45 00:03:28,080 --> 00:03:34,140 este es el directorio principal para cualquier archivo que su aplicación necesite y que esté garantizado para sobrevivir. 46 00:03:34,140 --> 00:03:38,000 Ahora, cuando desinstale su aplicación, esta carpeta también se borrará, por lo 47 00:03:38,010 --> 00:03:45,540 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 48 00:03:45,540 --> 00:03:47,070 usado su aplicación, por 49 00:03:47,400 --> 00:03:49,470 lo que aquí los archivos sobrevivirán. 50 00:03:50,220 --> 00:03:55,620 Por lo tanto, el directorio de documentos del sistema de archivos es la ruta a la que quiero mover mi archivo 51 00:03:55,620 --> 00:04:01,570 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. 52 00:04:01,710 --> 00:04:07,410 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 53 00:04:07,410 --> 00:04:14,570 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 54 00:04:14,570 --> 00:04:18,050 la carpeta a la que desea mover el archivo, sino 55 00:04:18,150 --> 00:04:20,990 que también debe incluir el nombre del archivo. 56 00:04:21,060 --> 00:04:24,530 Ahora, por eso, estoy feliz de mantener el nombre de la 57 00:04:24,540 --> 00:04:31,220 imagen autogenerada, por supuesto, ahora también podría generar sus propios nombres de imagen únicos, pero para eso, derivaré el nombre del archivo 58 00:04:31,290 --> 00:04:33,560 de la imagen que obtuve aquí, 59 00:04:33,570 --> 00:04:38,120 tenga en cuenta esa imagen aquí es un camino, el camino temporal a la imagen. 60 00:04:38,160 --> 00:04:44,880 Así que aquí, en realidad usaré una imagen que es una cadena y llamaré a dividir en esto para dividirlo por 61 00:04:44,880 --> 00:04:52,440 barras porque esta ruta, por supuesto, implica un par de barras al final y dividir convierte esta cadena en una matriz de segmentos de 62 00:04:52,440 --> 00:04:58,620 cadena donde cada segmento es un segmento antes y después de una barra tan grande en la cadena y 63 00:04:59,040 --> 00:05:00,420 allí al llamar 64 00:05:00,420 --> 00:05:01,850 pop, obtengo el último segmento. 65 00:05:01,860 --> 00:05:09,090 Entonces, lo que hace este código aquí es echar un vistazo a nuestra ruta de imagen, dividirlo en barras que hacen nuestra 66 00:05:09,300 --> 00:05:13,140 ruta completa allí y al hacer estallar el último elemento, ¿cuál es 67 00:05:13,140 --> 00:05:15,830 el último elemento? Ese es nuestro 68 00:05:15,870 --> 00:05:26,060 nombre de archivo, correcto, así que si tiene una ruta como somefolder / myimage. jpg, entonces lo que hacemos con split es obtener una 69 00:05:26,060 --> 00:05:34,880 matriz con alguna carpeta y con myimage. jpg y llamando pop en esto, obtenemos 70 00:05:35,180 --> 00:05:36,920 myimage. jpg, así 71 00:05:36,950 --> 00:05:39,250 que eso es lo que tenemos aquí. 72 00:05:40,590 --> 00:05:42,630 Así que esto nos devolverá nuestro 73 00:05:42,630 --> 00:05:49,300 nombre de archivo, este fragmento de código aquí y ahora podemos agregar esto aquí a nuestra ruta simplemente agregándolo así. 74 00:05:49,320 --> 00:05:53,730 Así que ahora esto genera una ruta que incluye una carpeta y luego el nombre del archivo. 75 00:05:53,730 --> 00:06:00,900 Aquí es donde quiero mover ese archivo y ahora podemos moverlo accediendo a FileSystem. moveAsync. 76 00:06:00,990 --> 00:06:04,130 Ese es un método que mueve un archivo de a a b 77 00:06:04,260 --> 00:06:09,540 y también utiliza una promesa porque mover ese archivo puede llevar un poco más de tiempo y, por lo tanto, nos 78 00:06:09,540 --> 00:06:10,730 dirá cuándo está hecho. 79 00:06:11,750 --> 00:06:18,100 Ahora mover asíncrono toma un objeto con dos piezas de información, desde y hacia la cual es bastante 80 00:06:18,140 --> 00:06:19,010 sencillo, supongo. 81 00:06:19,010 --> 00:06:25,070 Entonces, es de imagen porque la imagen es la ruta al directorio temporal, así que es de la cosa, ahí es donde 82 00:06:25,070 --> 00:06:32,290 se encuentra actualmente el archivo y, por supuesto, es nuestra nueva ruta, así. Ahora, como dije, esto devuelve una promesa 83 00:06:32,290 --> 00:06:36,420 para que podamos esperar esto y eso es todo. 84 00:06:36,430 --> 00:06:41,200 Ahora deberíamos envolver esto en un bloque try catch porque esto podría fallar porque, por 85 00:06:41,200 --> 00:06:48,090 ejemplo, no hay suficiente espacio en el dispositivo o de alguna manera tenemos un error de permisos o cualquier otra cosa está mal. 86 00:06:48,160 --> 00:06:55,690 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 87 00:06:55,690 --> 00:06:56,400 allí 88 00:06:56,620 --> 00:06:59,520 podríamos querer hacer algo, aquí estoy registrando el error 89 00:06:59,530 --> 00:07:04,680 y lo estoy volviendo a lanzar pero, por supuesto, podría hacer otras cosas allí como bueno, podrías 90 00:07:04,690 --> 00:07:09,310 almacenar esto en tu propio servidor de análisis, sea lo que sea que necesites hacer. 91 00:07:09,610 --> 00:07:15,100 Ahora, en última instancia, es posible que desee manejar esto en un componente también para mostrar una alerta allí, 92 00:07:15,100 --> 00:07:20,650 no lo haré, pero lo manejaría de la misma manera que lo hace, por ejemplo, manejar los errores HTTP, 93 00:07:20,650 --> 00:07:22,160 que es algo que 94 00:07:22,200 --> 00:07:24,040 eché un vistazo en El módulo HTTP. 95 00:07:24,040 --> 00:07:28,980 Así que aquí, estamos asumiendo que esto funcionará principalmente o que esto siempre funcionará y estamos 96 00:07:29,050 --> 00:07:31,350 moviendo el archivo. Ahora, una 97 00:07:31,420 --> 00:07:34,870 vez que se movió, sabemos que estará en la 98 00:07:34,900 --> 00:07:41,140 nueva ruta, por lo que es la nueva ruta que ahora quiero almacenar aquí en mis datos 99 00:07:41,140 --> 00:07:46,320 de lugar o en mi tienda Redux. Eso está muy bien, esto debería 100 00:07:46,330 --> 00:07:50,040 almacenar nuestra imagen en un directorio permanente, pero lo 101 00:07:50,140 --> 00:07:56,110 que no estamos haciendo es que no estamos almacenando nuestros datos en un lugar permanente. 102 00:07:56,110 --> 00:08:01,510 Por supuesto, estamos usando Redux aquí y eso significa que está almacenado en la memoria, pero cada vez que cerramos y 103 00:08:01,510 --> 00:08:08,010 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, 104 00:08:08,010 --> 00:08:12,730 solo están en la memoria que está activo mientras nuestra aplicación se ejecute y luego se borre. 105 00:08:12,730 --> 00:08:19,630 Entonces, como siguiente paso, quiero mostrarle cómo usar SQLite, que es una base de datos en el dispositivo, disponible en iOS y Android, 106 00:08:19,630 --> 00:08:25,360 para almacenar más que solo archivos, pero también almacenar nuestros datos, como el título y la ruta de 107 00:08:25,360 --> 00:08:26,800 la imagen y pronto.