Entonces, en la pantalla de la lista de lugares, quiero generar una lista de lugares como era de esperar y para
eso sabes un componente de React Native que podemos
importar y esa es la lista plana. La lista plana, por supuesto, es perfecta
para generar una lista.
Así que aquí volveré a la lista
plana ahora y quiero acceder a mis lugares.
Estos se almacenan en Redux para
que podamos o con la ayuda de Redux, para que podamos importar React Redux aquí o, para ser precisos, desde ese paquete, importamos
el selector de uso porque ahora en nuestro componente, podemos usar eso para obtener acceso a los datos almacenado en Redux.
Entonces, aquí, quiero obtener acceso a mis lugares con la ayuda
del selector de uso, eso es muy fácil, pasamos esa función que recibe nuestra tienda Redux,
nuestro estado Redux que está almacenado en la tienda allí y allí quiero obtener acceso a la rebanada de
lugares y aquí uso lugares porque en la aplicación. js, utilicé lugares como un identificador aquí, que nos lleva al segmento administrado con el
reductor de lugares y en ese reductor, tenemos otra clave de lugares,
así que al final aquí quiero acceder al estado. lugares. lugares y con eso, sabemos qué
tipo de datos queremos alimentar a la lista plana.
Ahora nuevamente, también agregaré un extractor de claves aquí para decirle a la lista plana dónde encontrar una identificación única para cada elemento y
para mí que está en la propiedad de identificación de cada lugar
y, por supuesto, necesitamos agregar un elemento de representación, para que podamos obtener nuestros datos de datos del elemento y luego
generar un componente para cada elemento que deseamos generar.
Ahora para eso, en realidad crearé un nuevo componente en la carpeta de componentes
y ese es el PlaceItem. archivo js. Ahora, para ahorrar tiempo, adjunté mi PlaceItem. js presenta esta conferencia y puedes reemplazar el
tuyo o el contenido tuyo por el mío, pero por supuesto te guiaré por lo que estoy
haciendo allí.
Este es un componente básico, ya que también lo construimos varias veces a lo largo de este
curso, solo tengo mi propio componente aquí que puede generar una imagen porque lo necesitaremos más adelante, que
luego tiene una vista con dos textos que siéntate al lado
de esta imagen, gracias al estilo que apliqué allí. Allí, saco el título y la dirección de ese
lugar, por supuesto, esa es información que aún no tenemos, pero agregaremos esto a lo largo de este módulo y
tenemos un componente de opacidad que se puede tocar alrededor para que podamos presionar cada lugar y cuándo lo
presionamos, activamos una función que esperamos obtener en el accesorio de selección.
Ahora en mi estilo aquí, configuré esto de modo que la imagen y este bloque de texto se sientan uno
al lado del otro en una fila aquí con la fila de dirección flexible, la imagen es entonces la imagen redondeada, por lo
que es una imagen redondeada, es un círculo con un color de fondo completo en caso de que todavía no tengamos una imagen que,
por supuesto, también puede cambiar a, por ejemplo, este color grisáceo. Luego tenemos el contenedor de información que es el
contenedor que contiene las dos partes de texto que ahora están organizadas en una columna una encima
de la otra y luego tenemos el título que es un poco más grande que la dirección
y, de hecho, también quiero usar negro como color de texto. Esa es la configuración que usaré aquí y ese es
el elemento de lugar que ahora podemos importar en
la pantalla de la lista de lugares, por lo que allí podemos importar el elemento de lugar desde el elemento de lugar de componentes y mostrar esto aquí en elementos de representación.
Entonces, allí quiero generar un elemento de posición como un componente de cierre automático y ahora colocar el elemento,
este nuevo componente necesita algunos datos de entrada. Necesitamos pasar un accesorio de selección que apunta
a una función que debe ejecutarse cuando tocamos un icono. Necesitamos pasar un accesorio de imagen, un accesorio de título y un accesorio de dirección,
por lo que se deben proporcionar cuatro accesorios. Entonces hagamos eso aquí. Para la imagen, todavía no tenemos
imagen, así que aquí pasaré nulo por el momento. Para el título, podemos hacer eso, por
supuesto, podemos apuntar a itemData. articulo. título porque un solo elemento es solo un elemento que sigue nuestro
modelo de lugar y que, por supuesto, tiene un accesorio de título, por lo que podemos acceder de forma segura. Para la dirección, todavía no tenemos eso, así que
estableceré esto
en nulo y para
seleccionar, bueno, por supuesto, podemos configurar
esto, allí quiero ir
a una nueva página después de todo. Así que podemos hacer esto con una función en línea anónima aquí
o con una función con nombre almacenada en
una constante separada, lo
que quieras, lo haré en línea y allí puedo usar accesorios. navegación. navegue y vaya a la pantalla de detalles
del lugar con el identificador de detalles del lugar que, por supuesto, en mi navegador es este identificador
aquí
y allá También quiero pasar algunos datos adicionales, algunos parámetros, así que pasaré un segundo argumento aquí para navegar y allá son dos datos
que quiero transmitir, ese es el título del
lugar y, por supuesto, es itemData. articulo. título, así que exactamente lo
mismo que estoy introduciendo en el accesorio de título aquí y ese también es el
ID de lugar que es itemData. articulo. ID y también tenemos
esa ID, así que eso es
algo que estamos generando cuando agregamos un nuevo lugar. Con eso, tenemos un elemento de lugar que nos
lleva a la pantalla de detalles del lugar y dado que ya tenemos un esqueleto básico en
esa pantalla, deberíamos poder ver eso.
Sin embargo, una cosa que agregaré a la pantalla de detalles del lugar es mi configuración de opciones de navegación
donde necesito esa función dinámica que luego devuelve un objeto de configuración porque allí quiero establecer el título del encabezado en función
de los parámetros que obtengo porque en la lista de lugares pantalla, estoy pasando un título de lugar y un
parámetro de ID de lugar a esta nueva pantalla. El título del lugar es lo que quiero extraer y configurar aquí en
mi encabezado, por
lo que allí puedo configurar el título del encabezado en navData. navegación. getParam place title para
que tengamos este título en el encabezado. Y ahora con eso, probemos, guardemos
todo y agreguemos un nuevo lugar, una prueba. Haga clic en Guardar lugar, volvemos y vemos que aquí, si lo toco, vamos
a la pantalla de detalles donde vemos eso en el encabezado. También probémoslo en Android con una prueba,
guárdelo, haga clic en él y todo funcionará. Así que ese es el flujo básico para esto, pero una
cosa que todavía no hemos hecho, por supuesto, es usar alguna funcionalidad nativa.
Así que ahora es hora de que hagamos eso y quiero comenzar con la cámara.