1 00:00:02,200 --> 00:00:08,410 Entonces, con respecto al espacio, en el componente selector de imágenes, simplemente agregaré un poco de margen inferior aquí de 2 00:00:08,410 --> 00:00:15,160 15 para agregar un espacio entre este componente selector de imágenes y todo lo demás en el formulario, pero lo más importante, 3 00:00:15,160 --> 00:00:21,520 por supuesto, es que tipo de pasar esta imagen elegida a nuestro lugar, nuestra nueva pantalla de lugar justo porque allí 4 00:00:21,520 --> 00:00:25,870 es donde necesitamos la imagen al final, no solo la necesito aquí como vista 5 00:00:25,870 --> 00:00:28,370 previa, también la necesito en esa otra pantalla. 6 00:00:28,600 --> 00:00:33,910 Bueno, para eso, podemos ir a nuestro controlador de toma de imágenes y, cuando configuramos 7 00:00:34,000 --> 00:00:41,590 esto como una vista previa, por supuesto, también podemos acercarnos a nuestros accesorios y asumir que obtenemos, digamos, un accesorio de imagen 8 00:00:41,620 --> 00:00:48,760 tomada que debería apuntar a una función que definimos en la nueva pantalla de lugar que ahora podemos ejecutar y 9 00:00:48,780 --> 00:00:54,700 para esa función, también reenvío mi imageUri. Por lo tanto, no solo lo guardo aquí internamente 10 00:00:54,700 --> 00:01:01,730 para tener una vista previa, también lo reenvío al componente principal, por así decirlo, y eso debería estar en la imagen tomada. 11 00:01:01,920 --> 00:01:08,250 Entonces, todo lo que tenemos que hacer para que esto funcione es que debemos ir a la pantalla del nuevo lugar y agregar esto en 12 00:01:08,250 --> 00:01:10,350 la imagen tomada aquí en el selector de 13 00:01:10,410 --> 00:01:14,510 imágenes y ahora esto debería apuntar a una función que el selector de imágenes ejecuta una 14 00:01:14,550 --> 00:01:16,410 vez que lo hicimos Elige una imagen. 15 00:01:16,680 --> 00:01:22,950 Entonces, por supuesto, aquí también quiero almacenar ese valor, así que agregaré otro estado aquí y ese es el 16 00:01:23,820 --> 00:01:27,300 valor de la imagen o solo la imagen y establecer 17 00:01:27,390 --> 00:01:38,540 la imagen, tal vez la imagen seleccionada y el nombre de la imagen seleccionada depende de usted, que inicialmente es nulo o indefinido como este y ahora podemos agregar una nueva función para 18 00:01:38,540 --> 00:01:40,280 esto, el controlador de 19 00:01:40,280 --> 00:01:42,470 imagen tomada aquí que recibe la 20 00:01:42,470 --> 00:01:50,240 ruta de la imagen al final, a la derecha, eso es lo que enviamos desde el selector de imágenes cuando llamamos a esta 21 00:01:50,240 --> 00:01:53,990 función y aquí configuramos la imagen seleccionada a la ruta de 22 00:01:54,230 --> 00:02:01,370 la imagen que estamos obteniendo como argumento y el controlador de la imagen tomada ahora es lo que pasamos al selector de 23 00:02:01,370 --> 00:02:06,800 imágenes aquí con la ayuda del accesorio de imagen tomada y así es como nos comunicamos 24 00:02:06,920 --> 00:02:14,140 entre el selector de imágenes y el Nueva pantalla de lugar. Cuando ahora hacemos clic en el botón Guardar 25 00:02:14,140 --> 00:02:20,850 y, por lo tanto, se ejecuta el controlador de guardar lugar, cuando despachamos esta acción de 26 00:02:20,860 --> 00:02:24,010 agregar lugar, ahora quiero reenviar la 27 00:02:24,100 --> 00:02:32,380 imagen seleccionada, por lo que este estado es constante aquí. Por supuesto, para eso, necesitamos ajustar un poco el creador de la 28 00:02:32,380 --> 00:02:38,740 acción agregar lugar, en este momento solo espera un título, ahora también debería esperar una imagen y también 29 00:02:38,740 --> 00:02:40,950 agregar esto aquí a nuestros datos 30 00:02:40,990 --> 00:02:47,430 de lugar y en el reductor, ahora quiero agregue la imagen al lugar que se está creando pero es 31 00:02:47,440 --> 00:02:48,370 importante, en 32 00:02:48,520 --> 00:02:50,150 este momento nuestro modelo 33 00:02:50,170 --> 00:02:57,220 de lugar no espera ninguna imagen, por lo que es hora de cambiar eso también, agregue una imagenUrl allí, tal 34 00:02:57,250 --> 00:03:06,490 vez, la imagenUri sea precisa porque es local y luego tenga esta imagen URI establecido igual a imageUri estamos obteniendo aquí y ahora con este reductor ajustado, 35 00:03:06,490 --> 00:03:15,640 de vuelta en el reductor de lugares, ahora obtenemos estos datos de imagen adicionales en nuestra acción y tenemos que pasar esto al nuevo constructor de 36 00:03:15,640 --> 00:03:21,670 lugares, así que aquí la acción. placeData. La imagen es lo que quiero reenviar, así que ese 37 00:03:21,670 --> 00:03:28,750 es el nuevo argumento agregado al constructor de lugares y la acción. placeData. imagen, por supuesto, se refiere a 38 00:03:28,750 --> 00:03:35,840 la imagen que estamos configurando aquí en nuestro objeto de acción. Entonces, con eso, la imagen en realidad se agrega al lugar que se 39 00:03:35,840 --> 00:03:37,160 crea y con eso 40 00:03:37,280 --> 00:03:42,920 en la pantalla de la lista de lugares donde sacamos el elemento del lugar, ahora podemos alimentar algunos datos en 41 00:03:42,920 --> 00:03:50,360 la imagen y eso sería itemData. articulo. imageUrl, URL de la imagen porque itemData. El elemento se refiere 42 00:03:50,420 --> 00:03:56,750 a un solo lugar que se crea como se define en nuestro modelo de lugar y allí tenemos imageUri 43 00:03:56,780 --> 00:04:03,090 y, por lo tanto, aquí debe ser imageUri, no URL, pero eso es lo importante, no es solo 44 00:04:03,220 --> 00:04:05,200 image, es imageUri porque aquí nos 45 00:04:05,230 --> 00:04:12,740 referimos a un objeto de lugar siguiendo nuestro modelo de lugar. Si ahora guardamos eso y echamos un vistazo, esto 46 00:04:12,740 --> 00:04:13,410 debería 47 00:04:13,580 --> 00:04:19,250 funcionar y debería permitirnos agregar imágenes que también vemos en nuestra lista de lugares. 48 00:04:19,340 --> 00:04:30,680 Entonces, si hago clic en tomar imagen y tomo esta imagen ficticia aquí, así, recorto esto y luego también agrego un título aquí y hago 49 00:04:30,980 --> 00:04:34,700 clic en Guardar lugar, esto no se ve 50 00:04:34,880 --> 00:04:37,710 tan mal, vemos nuestra imagen aquí. 51 00:04:38,120 --> 00:04:40,770 Ahora una cosa es importante de entender. 52 00:04:40,880 --> 00:04:47,240 Hasta ahora, solo almacenamos esta imagen en la ruta predeterminada que sacamos de la caja, que es esta ruta temporal y, 53 00:04:47,240 --> 00:04:52,160 por supuesto, no es donde queremos tenerla almacenada porque, como mencioné, esto se borrará periódicamente y, 54 00:04:52,160 --> 00:04:57,050 por lo tanto, eventualmente Perderemos nuestra imagen, que por supuesto no es el objetivo aquí.