Ahora ya sabe cómo podemos ir a la página de detalles, por supuesto, es algo
que hicimos antes cuando pasamos de la página de categorías a la página de comidas de categoría. Así que podemos usar el mismo enfoque aquí y,
por supuesto, siéntase
libre de pausar el video en este punto y hacerlo por su
cuenta, eso es absolutamente algo que puede hacer aquí como práctica. Sin embargo, hagámoslo también juntos.
Entonces, en la pantalla de comidas de categoría, cuando seleccionamos una comida, onSelectMeal, esta función aquí debería activarse porque estamos
pasando esta función a través de onSelectMeal al elemento de comida y allí, la vinculamos al presionar, en la
opacidad táctil aquí, por lo que
debería activarse en una comida seleccionada y, por lo tanto, en la pantalla de comidas de
categoría, en esta función aquí, podemos navegar. Ahora, desde que definí esta función de procesamiento de comida donde
renderizo mi artículo de comida dentro de mi componente, tengo acceso a accesorios y allí, como la pantalla de categoría de comida es
nuestro componente que cargamos con la ayuda de la navegación, puedo acceder a la propiedad de navegación y el método de navegación y usted aprendió que
allí, ahora podemos pasar el nombre de la ruta a donde queremos ir y eso sería el detalle de la comida, por lo
que el nombre de la ruta que configuramos en el navegador de comidas, este nombre aquí, esto cargará el página de detalles de comida.
Ahora necesitaremos reenviar algunos datos allí y los datos que quiero reenviar aquí, por supuesto, son la ID de la
comida seleccionada, para que luego podamos cargar los detalles de esa comida en la página de detalles de esa
comida para mostrarlos allí.
Entonces, en la pantalla de comidas de categoría aquí, podemos configurar parámetros aquí en nuestro objeto de navegación, en el objeto que pasamos para navegar y
parámetros toma un objeto de pares clave-valor como aprendiste, eso es algo que hicimos
antes y aquí, quiero para reenviar mi comida. id que, por supuesto, puedo obtener de los
datos de un elemento porque itemData. el artículo es una comida y cada comida, como puede ver en el modelo, tiene una identificación, estamos almacenando esto aquí.
Por lo tanto, aquí, por supuesto, podemos decir itemData. articulo. id, eso es lo que quiero reenviar y
con eso, deberíamos ir a la página de detalles de la comida y allí, también podremos extraer la identificación de la comida
que cargamos.
Entonces, en la pantalla MealDetailScreen, veamos si eso funciona, la comida. ID es accesorios. navegación. getParam y
ahora el nombre era comida. id, ese es el nombre del parámetro que elegí aquí para
almacenar el parámetro, si eligió un nombre diferente aquí, debe elegir un nombre
diferente aquí o usar el mismo nombre allí, por supuesto, y ahora podemos seleccionar la comida, para eso vamos a importar todas
las comidas del archivo de datos ficticios en la carpeta de datos, como esta y ahora la comida seleccionada aquí, por supuesto, es encontrar comidas y luego ejecutamos esta función en cada comida allí y es la
comida donde está la comida. Identificación coincide con la comida. Identificación que extrajimos
allí, esa es nuestra comida seleccionada. Para demostrar que esto funciona, podemos mostrarlo allí, selectedMeal. título y, por supuesto, también
quiero establecer el título en el encabezado y eso también es algo que aprendiste.
Puede hacer esto agregando opciones de navegación a esta pantalla aquí, opciones de navegación y
aprendió que si desea recuperar algo dinámico, puede hacerlo con la ayuda de esta función especial aquí.
Los datos de navegación son lo que obtienes allí, esta función es llamada por React navigation tal como lo aprendiste
y ahora tenemos que devolver nuestro objeto de navegación, nuestro objeto de opciones de navegación, pero antes de devolverlo, podemos usar los datos que obtenemos
de datos de navegación, como nuestro accesorio de navegación que a su vez nos permite obtener acceso a
un parámetro, para que podamos usar navigationData. navegación. getParam para obtener nuestra comida. Identificación aquí también y también recuperar nuestra comida
tal como lo estamos haciendo allá arriba en el componente, hacer lo mismo
allí abajo para las opciones de navegación y con la comida seleccionada, por supuesto, aquí podemos
establecer un título de encabezado para selectedMeal. título y eso es algo que hicimos antes, así
es como podemos extraer datos aquí en nuestras opciones de navegación y usar esos datos dinámicos allí, por ejemplo,
para establecer el título del encabezado.
Con esto fuera del
camino, veamos si funciona, tal vez en Android. Vayamos a la luz y encantador, allí tenemos todas nuestras recetas, vamos a la ensalada
aquí y aquí está, aquí está nuestro título, también lo vemos aquí, así que todo está
cargado, si vamos al salmón, en su lugar vemos ese.
Así que todo funciona como debería, muy agradable
de ver, ahora es
el momento de dar el siguiente paso porque, por ejemplo, queremos poder marcar una comida como favorita y
para esto, quiero tener un icono de estrella aquí en la navegación que puedo presionar.
Eso es algo que todavía nos falta y aún no hemos aprendido, por
lo que es un buen siguiente paso.