Estamos extrayendo nuestra categoría aquí en nuestro componente porque estamos obteniendo nuestro parámetro allí con la ayuda
de accesorios de navegación.
Ahora, en realidad, quiero mostrar el título en mi encabezado.
Ahora aprendió cómo puede configurar ese encabezado con la ayuda de las opciones de navegación, por lo que en
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,
podemos agregar opciones de navegación y aprendió que esto es un El objeto Javascript donde
puede configurar un título de encabezado y un título de encabezado ahora debería ser el nombre de mi categoría.
El problema aquí es que aquí, la categoría seleccionada está disponible, pero eso está dentro de la función del componente.
Por supuesto, eso no es algo a lo que podamos acceder aquí porque esto sucede después de la
definición de la función.
Así que no tenemos acceso a la categoría que identificamos allí,
eso es un problema.
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
ser una función si necesita una configuración dinámica que depende del cambio de datos y, por supuesto, los datos de los
que dependemos aquí están cambiando porque nosotros ' estamos usando una misma pantalla para diferentes
categorías y, por lo tanto, la identificación y el título de la categoría cambian cada vez
que usamos esa pantalla. Una vez lo estamos usando para
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,
es compatible con React navigation y
si es una función, lo que está pasando a las opciones de navegación, React
navigation lo llamará por usted y pasará algunos datos de navegación, por lo que será pasar un objeto con algunos datos que
deberían ayudarlo, veremos qué hay allí en un segundo porque simplemente podemos registrar estos datos de
navegación aquí.
Comencemos con eso, ahora
vayamos a esta página y veamos qué hay allí.
Si amplío esto aquí, este es el registro que obtuve y verá
que tenemos otro accesorio de navegación en los datos de navegación. Allí tenemos acciones, tenemos navegar pop, empujar, así
que
básicamente lo que sabíamos. También tenemos getParam allí
y eso debería ser útil porque esto nos permitirá extraer datos aquí dentro de nuestras opciones de
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.
Así que aquí, ahora podemos usar navigationData. navegación. getParam para obtener mi ID de categoría, exactamente
lo que hicimos en el componente. Entonces podemos repetir el código que teníamos en un componente
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.
Así que ahora aquí, también tenemos acceso a la categoría seleccionada y ahora, las opciones de navegación, esta función,
si es una función, por supuesto debería devolver un objeto con sus opciones de navegación.
Entonces, lo que anteriormente establecimos directamente como opciones de navegación cuando solo teníamos valores codificados ahora tiene
que
ser devuelto, pero ahora puede usar estos datos derivados dinámicamente o la información derivada dinámicamente aquí.
Así que ahora todavía podemos configurar un título de encabezado aquí y el título del encabezado ahora se puede
seleccionar Categoría. título.
Así es como podemos derivar esto dinámicamente y, por lo tanto, ahora si regresas,
ves italiano aquí, ves rápido y fácil aquí, ves alemán aquí y eso simplemente funciona.
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
otra característica predeterminada que le proporciona React navigation. Aquí vemos las categorías de comidas porque
venimos de categorías de comidas. Solo en rápido y fácil donde esto
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
comportamiento predeterminado que puede anular, pero con el que estoy feliz aquí. En Android, no tenemos un texto de retroceso pero, por
supuesto, tenemos un botón de retroceso y allí, el encabezado también se llena correctamente para las pantallas que se cargan.
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
visible aquí en Android es que el encabezado en la nueva pantalla que estamos cargando no tiene el mismo estilo
que nuestro encabezado aquí, no tiene el color de fondo a saber. Ahora, por supuesto, eso se soluciona fácilmente porque en las
opciones de navegación de las comidas de categoría, simplemente podemos incorporar el estilo del encabezado y el color del tinte del
encabezado que configuramos aquí en la otra pantalla también. Entonces podemos copiar eso aquí y eso
solo significa que tenemos que importar la API de la plataforma y, por supuesto, nuestro color constante, así que
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
que, por supuesto, es lo que normalmente desea. Sin embargo, lo que normalmente no desea es que
tenga que copiar la misma configuración en cada pantalla porque en esta aplicación, no tenemos tantas
pantallas, ciertamente podemos hacerlo, pero en aplicaciones más grandes donde tiene más pantallas,
eso sería súper molesto y súper engorroso, por lo que definitivamente no es el camino a seguir allí.
Así que echemos un vistazo a una alternativa en la próxima conferencia.