Entonces, con respecto al espacio, en el componente selector de imágenes, simplemente agregaré un poco de margen inferior aquí de
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,
por supuesto, es que tipo de pasar esta imagen elegida a nuestro lugar, nuestra nueva pantalla de lugar justo porque allí
es donde necesitamos la imagen al final, no solo la necesito aquí como vista
previa, también la necesito en esa otra pantalla.
Bueno, para eso, podemos ir a nuestro controlador de toma de imágenes y, cuando configuramos
esto como una vista previa, por supuesto, también podemos acercarnos a nuestros accesorios y asumir que obtenemos, digamos, un accesorio de imagen
tomada que debería apuntar a una función que definimos en la nueva pantalla de lugar que ahora podemos ejecutar y
para esa función, también reenvío mi imageUri. Por lo tanto, no solo lo guardo aquí internamente
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.
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
la imagen tomada aquí en el selector de
imágenes y ahora esto debería apuntar a una función que el selector de imágenes ejecuta una
vez que lo hicimos Elige una imagen.
Entonces, por supuesto, aquí también quiero almacenar ese valor, así que agregaré otro estado aquí y ese es el
valor de la imagen o solo la imagen y establecer
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
esto, el controlador de
imagen tomada aquí que recibe la
ruta de la imagen al final, a la derecha, eso es lo que enviamos desde el selector de imágenes cuando llamamos a esta
función y aquí configuramos la imagen seleccionada a la ruta de
la imagen que estamos obteniendo como argumento y el controlador de la imagen tomada ahora es lo que pasamos al selector de
imágenes aquí con la ayuda del accesorio de imagen tomada y así es como nos comunicamos
entre el selector de imágenes y el Nueva pantalla de lugar. Cuando ahora hacemos clic en el botón Guardar
y, por lo tanto, se ejecuta el controlador de guardar lugar, cuando despachamos esta acción de
agregar lugar, ahora quiero reenviar la
imagen seleccionada, por lo que este estado es constante aquí. Por supuesto, para eso, necesitamos ajustar un poco el creador de la
acción agregar lugar, en este momento solo espera un título, ahora también debería esperar una imagen y también
agregar esto aquí a nuestros datos
de lugar y en el reductor, ahora quiero agregue la imagen al lugar que se está creando pero es
importante, en
este momento nuestro modelo
de lugar no espera ninguna imagen, por lo que es hora de cambiar eso también, agregue una imagenUrl allí, tal
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,
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
lugares, así que aquí la acción. placeData. La imagen es lo que quiero reenviar, así que ese
es el nuevo argumento agregado al constructor de lugares y la acción. placeData. imagen, por supuesto, se refiere a
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
crea y con eso
en la pantalla de la lista de lugares donde sacamos el elemento del lugar, ahora podemos alimentar algunos datos en
la imagen y eso sería itemData. articulo. imageUrl, URL de la imagen porque itemData. El elemento se refiere
a un solo lugar que se crea como se define en nuestro modelo de lugar y allí tenemos imageUri
y, por lo tanto, aquí debe ser imageUri, no URL, pero eso es lo importante, no es solo
image, es imageUri porque aquí nos
referimos a un objeto de lugar siguiendo nuestro modelo de lugar. Si ahora guardamos eso y echamos un vistazo, esto
debería
funcionar y debería permitirnos agregar imágenes que también vemos en nuestra lista de lugares.
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
clic en Guardar lugar, esto no se ve
tan mal, vemos nuestra imagen aquí.
Ahora una cosa es importante de entender.
Hasta ahora, solo almacenamos esta imagen en la ruta predeterminada que sacamos de la caja, que es esta ruta temporal y,
por supuesto, no es donde queremos tenerla almacenada porque, como mencioné, esto se borrará periódicamente y,
por lo tanto, eventualmente Perderemos nuestra imagen, que por supuesto no es el objetivo aquí.