1
00:00:02,710 --> 00:00:05,590
Ahora ya sabe cómo podemos ir a la página de detalles, por supuesto, es algo

2
00:00:05,620 --> 00:00:11,530
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,

3
00:00:11,530 --> 00:00:12,880
por supuesto, siéntase

4
00:00:12,910 --> 00:00:16,900
libre de pausar el video en este punto y hacerlo por su

5
00:00:16,900 --> 00:00:24,540
cuenta, eso es absolutamente algo que puede hacer aquí como práctica. Sin embargo, hagámoslo también juntos.

6
00:00:24,630 --> 00:00:32,550
Entonces, en la pantalla de comidas de categoría, cuando seleccionamos una comida, onSelectMeal, esta función aquí debería activarse porque estamos

7
00:00:32,550 --> 00:00:39,950
pasando esta función a través de onSelectMeal al elemento de comida y allí, la vinculamos al presionar, en la

8
00:00:39,950 --> 00:00:42,550
opacidad táctil aquí, por lo que

9
00:00:42,570 --> 00:00:48,870
debería activarse en una comida seleccionada y, por lo tanto, en la pantalla de comidas de

10
00:00:48,870 --> 00:00:54,870
categoría, en esta función aquí, podemos navegar. Ahora, desde que definí esta función de procesamiento de comida donde

11
00:00:54,900 --> 00:01:00,780
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

12
00:01:00,780 --> 00:01:07,050
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

13
00:01:07,050 --> 00:01:12,820
allí, ahora podemos pasar el nombre de la ruta a donde queremos ir y eso sería el detalle de la comida, por lo

14
00:01:12,900 --> 00:01:18,810
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.

15
00:01:19,590 --> 00:01:26,400
Ahora necesitaremos reenviar algunos datos allí y los datos que quiero reenviar aquí, por supuesto, son la ID de la

16
00:01:26,400 --> 00:01:32,850
comida seleccionada, para que luego podamos cargar los detalles de esa comida en la página de detalles de esa

17
00:01:32,850 --> 00:01:34,500
comida para mostrarlos allí.

18
00:01:34,770 --> 00:01:44,520
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

19
00:01:44,520 --> 00:01:49,980
parámetros toma un objeto de pares clave-valor como aprendiste, eso es algo que hicimos

20
00:01:49,980 --> 00:01:56,730
antes y aquí, quiero para reenviar mi comida. id que, por supuesto, puedo obtener de los

21
00:01:56,790 --> 00:02:03,330
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í.

22
00:02:04,320 --> 00:02:10,890
Por lo tanto, aquí, por supuesto, podemos decir itemData. articulo. id, eso es lo que quiero reenviar y

23
00:02:10,890 --> 00:02:16,650
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

24
00:02:16,650 --> 00:02:17,410
que cargamos.

25
00:02:17,640 --> 00:02:26,760
Entonces, en la pantalla MealDetailScreen, veamos si eso funciona, la comida. ID es accesorios. navegación. getParam y

26
00:02:26,760 --> 00:02:34,470
ahora el nombre era comida. id, ese es el nombre del parámetro que elegí aquí para

27
00:02:34,470 --> 00:02:39,090
almacenar el parámetro, si eligió un nombre diferente aquí, debe elegir un nombre

28
00:02:39,090 --> 00:02:46,980
diferente aquí o usar el mismo nombre allí, por supuesto, y ahora podemos seleccionar la comida, para eso vamos a importar todas

29
00:02:46,980 --> 00:02:59,800
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

30
00:02:59,800 --> 00:03:05,770
comida donde está la comida. Identificación coincide con la comida. Identificación que extrajimos

31
00:03:05,860 --> 00:03:14,200
allí, esa es nuestra comida seleccionada. Para demostrar que esto funciona, podemos mostrarlo allí, selectedMeal. título y, por supuesto, también

32
00:03:14,290 --> 00:03:21,250
quiero establecer el título en el encabezado y eso también es algo que aprendiste.

33
00:03:21,970 --> 00:03:28,460
Puede hacer esto agregando opciones de navegación a esta pantalla aquí, opciones de navegación y

34
00:03:28,490 --> 00:03:35,090
aprendió que si desea recuperar algo dinámico, puede hacerlo con la ayuda de esta función especial aquí.

35
00:03:35,690 --> 00:03:42,650
Los datos de navegación son lo que obtienes allí, esta función es llamada por React navigation tal como lo aprendiste

36
00:03:43,340 --> 00:03:52,050
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

37
00:03:52,050 --> 00:03:58,470
de datos de navegación, como nuestro accesorio de navegación que a su vez nos permite obtener acceso a

38
00:03:58,470 --> 00:04:09,340
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

39
00:04:09,340 --> 00:04:13,890
tal como lo estamos haciendo allá arriba en el componente, hacer lo mismo

40
00:04:13,990 --> 00:04:19,630
allí abajo para las opciones de navegación y con la comida seleccionada, por supuesto, aquí podemos

41
00:04:19,630 --> 00:04:25,040
establecer un título de encabezado para selectedMeal. título y eso es algo que hicimos antes, así

42
00:04:25,060 --> 00:04:30,650
es como podemos extraer datos aquí en nuestras opciones de navegación y usar esos datos dinámicos allí, por ejemplo,

43
00:04:30,790 --> 00:04:32,620
para establecer el título del encabezado.

44
00:04:35,400 --> 00:04:37,830
Con esto fuera del

45
00:04:37,920 --> 00:04:47,600
camino, veamos si funciona, tal vez en Android. Vayamos a la luz y encantador, allí tenemos todas nuestras recetas, vamos a la ensalada

46
00:04:49,530 --> 00:04:54,690
aquí y aquí está, aquí está nuestro título, también lo vemos aquí, así que todo está

47
00:04:54,690 --> 00:04:58,050
cargado, si vamos al salmón, en su lugar vemos ese.

48
00:04:58,050 --> 00:05:00,850
Así que todo funciona como debería, muy agradable

49
00:05:00,870 --> 00:05:02,350
de ver, ahora es

50
00:05:02,370 --> 00:05:08,340
el momento de dar el siguiente paso porque, por ejemplo, queremos poder marcar una comida como favorita y

51
00:05:08,340 --> 00:05:13,650
para esto, quiero tener un icono de estrella aquí en la navegación que puedo presionar.

52
00:05:13,650 --> 00:05:16,290
Eso es algo que todavía nos falta y aún no hemos aprendido, por

53
00:05:16,320 --> 00:05:17,850
lo que es un buen siguiente paso.