1
00:00:02,250 --> 00:00:07,650
Estamos extrayendo nuestra categoría aquí en nuestro componente porque estamos obteniendo nuestro parámetro allí con la ayuda

2
00:00:07,650 --> 00:00:09,130
de accesorios de navegación.

3
00:00:09,150 --> 00:00:12,980
Ahora, en realidad, quiero mostrar el título en mi encabezado.

4
00:00:13,050 --> 00:00:18,520
Ahora aprendió cómo puede configurar ese encabezado con la ayuda de las opciones de navegación, por lo que en

5
00:00:18,630 --> 00:00:25,170
el componente de la pantalla de comida de categoría y, por lo tanto, esta es una función, por lo tanto, es un objeto,

6
00:00:25,530 --> 00:00:30,300
podemos agregar opciones de navegación y aprendió que esto es un El objeto Javascript donde

7
00:00:30,300 --> 00:00:35,670
puede configurar un título de encabezado y un título de encabezado ahora debería ser el nombre de mi categoría.

8
00:00:35,700 --> 00:00:43,910
El problema aquí es que aquí, la categoría seleccionada está disponible, pero eso está dentro de la función del componente.

9
00:00:43,910 --> 00:00:49,670
Por supuesto, eso no es algo a lo que podamos acceder aquí porque esto sucede después de la

10
00:00:49,670 --> 00:00:50,990
definición de la función.

11
00:00:51,350 --> 00:00:55,150
Así que no tenemos acceso a la categoría que identificamos allí,

12
00:00:55,220 --> 00:00:56,920
eso es un problema.

13
00:00:56,930 --> 00:01:04,390
Lo bueno es que las opciones de navegación pueden ser un objeto si tiene valores de configuración estáticos codificados, pero también puede

14
00:01:05,000 --> 00:01:11,990
ser una función si necesita una configuración dinámica que depende del cambio de datos y, por supuesto, los datos de los

15
00:01:12,020 --> 00:01:17,300
que dependemos aquí están cambiando porque nosotros ' estamos usando una misma pantalla para diferentes

16
00:01:17,300 --> 00:01:22,820
categorías y, por lo tanto, la identificación y el título de la categoría cambian cada vez

17
00:01:22,820 --> 00:01:26,140
que usamos esa pantalla. Una vez lo estamos usando para

18
00:01:26,140 --> 00:01:32,360
la categoría italiana, la próxima vez lo estamos usando para la categoría exótica. Esta función que también puede usar, por supuesto,

19
00:01:32,360 --> 00:01:34,700
es compatible con React navigation y

20
00:01:34,700 --> 00:01:40,220
si es una función, lo que está pasando a las opciones de navegación, React

21
00:01:40,220 --> 00:01:48,740
navigation lo llamará por usted y pasará algunos datos de navegación, por lo que será pasar un objeto con algunos datos que

22
00:01:48,740 --> 00:01:54,800
deberían ayudarlo, veremos qué hay allí en un segundo porque simplemente podemos registrar estos datos de

23
00:01:54,800 --> 00:01:55,850
navegación aquí.

24
00:01:55,970 --> 00:01:57,610
Comencemos con eso, ahora

25
00:01:57,710 --> 00:02:01,210
vayamos a esta página y veamos qué hay allí.

26
00:02:01,310 --> 00:02:05,850
Si amplío esto aquí, este es el registro que obtuve y verá

27
00:02:05,850 --> 00:02:14,570
que tenemos otro accesorio de navegación en los datos de navegación. Allí tenemos acciones, tenemos navegar pop, empujar, así

28
00:02:14,580 --> 00:02:15,390
que

29
00:02:15,390 --> 00:02:20,010
básicamente lo que sabíamos. También tenemos getParam allí

30
00:02:20,010 --> 00:02:28,050
y eso debería ser útil porque esto nos permitirá extraer datos aquí dentro de nuestras opciones de

31
00:02:28,110 --> 00:02:36,880
navegación al final, lo que debería ser súper útil. Entonces, al final, obtenemos el mismo accesorio de navegación que también tenemos en nuestros accesorios de componentes.

32
00:02:37,040 --> 00:02:48,110
Así que aquí, ahora podemos usar navigationData. navegación. getParam para obtener mi ID de categoría, exactamente

33
00:02:48,110 --> 00:02:54,660
lo que hicimos en el componente. Entonces podemos repetir el código que teníamos en un componente

34
00:02:54,660 --> 00:03:02,020
y obtener la categoría seleccionada, no solo en el componente sino también en esta función que usamos para configurar nuestras opciones de navegación.

35
00:03:02,040 --> 00:03:08,130
Así que ahora aquí, también tenemos acceso a la categoría seleccionada y ahora, las opciones de navegación, esta función,

36
00:03:08,220 --> 00:03:13,460
si es una función, por supuesto debería devolver un objeto con sus opciones de navegación.

37
00:03:13,470 --> 00:03:19,860
Entonces, lo que anteriormente establecimos directamente como opciones de navegación cuando solo teníamos valores codificados ahora tiene

38
00:03:19,860 --> 00:03:20,550
que

39
00:03:20,610 --> 00:03:26,950
ser devuelto, pero ahora puede usar estos datos derivados dinámicamente o la información derivada dinámicamente aquí.

40
00:03:26,970 --> 00:03:33,600
Así que ahora todavía podemos configurar un título de encabezado aquí y el título del encabezado ahora se puede

41
00:03:33,720 --> 00:03:35,450
seleccionar Categoría. título.

42
00:03:35,510 --> 00:03:41,300
Así es como podemos derivar esto dinámicamente y, por lo tanto, ahora si regresas,

43
00:03:41,300 --> 00:03:47,420
ves italiano aquí, ves rápido y fácil aquí, ves alemán aquí y eso simplemente funciona.

44
00:03:47,420 --> 00:03:55,280
Tenga en cuenta que, de forma predeterminada, también obtiene un texto de botón de retroceso que es el título de la pantalla anterior, esa es

45
00:03:55,280 --> 00:04:01,130
otra característica predeterminada que le proporciona React navigation. Aquí vemos las categorías de comidas porque

46
00:04:01,130 --> 00:04:05,720
venimos de categorías de comidas. Solo en rápido y fácil donde esto

47
00:04:05,720 --> 00:04:13,010
sería demasiado largo al lado de este título un poco más largo, se revierte y se establece de forma predeterminada en retroceder, lo cual es un buen

48
00:04:13,010 --> 00:04:19,400
comportamiento predeterminado que puede anular, pero con el que estoy feliz aquí. En Android, no tenemos un texto de retroceso pero, por

49
00:04:19,400 --> 00:04:25,340
supuesto, tenemos un botón de retroceso y allí, el encabezado también se llena correctamente para las pantallas que se cargan.

50
00:04:26,240 --> 00:04:32,030
Así es como también podemos obtener nuestros datos dinámicamente aquí en las opciones de navegación. Sin embargo, un problema que puede notar que es más

51
00:04:32,030 --> 00:04:37,430
visible aquí en Android es que el encabezado en la nueva pantalla que estamos cargando no tiene el mismo estilo

52
00:04:37,700 --> 00:04:44,450
que nuestro encabezado aquí, no tiene el color de fondo a saber. Ahora, por supuesto, eso se soluciona fácilmente porque en las

53
00:04:44,480 --> 00:04:51,620
opciones de navegación de las comidas de categoría, simplemente podemos incorporar el estilo del encabezado y el color del tinte del

54
00:04:51,620 --> 00:04:58,250
encabezado que configuramos aquí en la otra pantalla también. Entonces podemos copiar eso aquí y eso

55
00:04:58,250 --> 00:05:06,200
solo significa que tenemos que importar la API de la plataforma y, por supuesto, nuestro color constante, así que

56
00:05:06,550 --> 00:05:18,730
importa colores de constantes / Colores como este y cuando lo hagamos, veremos que si vamos allí , ahora tenemos el mismo estilo de encabezado para esta nueva página

57
00:05:18,730 --> 00:05:25,570
que, por supuesto, es lo que normalmente desea. Sin embargo, lo que normalmente no desea es que

58
00:05:25,600 --> 00:05:31,300
tenga que copiar la misma configuración en cada pantalla porque en esta aplicación, no tenemos tantas

59
00:05:31,300 --> 00:05:36,070
pantallas, ciertamente podemos hacerlo, pero en aplicaciones más grandes donde tiene más pantallas,

60
00:05:36,070 --> 00:05:42,520
eso sería súper molesto y súper engorroso, por lo que definitivamente no es el camino a seguir allí.

61
00:05:42,520 --> 00:05:44,740
Así que echemos un vistazo a una alternativa en la próxima conferencia.