En la pantalla de categorías, queremos asegurarnos de que nuestro elemento pueda
tocarse allí, por lo que importaremos tocable e importaré aquí la opacidad táctil para tener un ligero efecto
de opacidad, pero,
por supuesto, depende de usted qué
patrón o qué componente use allí, debe ser un componente táctil a través del cual puede envolver su
elemento aquí
y ahora en opacidad táctil, agregaré onPress para que podamos hacer algo cuando se presione.
¿Qué queremos hacer?
Queremos ir a la pantalla de comidas de categoría, que es una especie de página de detalles para una categoría elegida para mostrar todas
las recetas para esa categoría, todavía
no tenemos recetas pero todavía quiero ir a la página.
Por lo tanto, aquí, debemos activar una acción de navegación y anteriormente lo hicimos con la navegación
de accesorios, ¿no?
El problema es que no tenemos accesorios disponibles aquí porque estamos dentro de la función de elemento de la
cuadrícula de procesamiento que está fuera de nuestro componente.
Ahora podemos simplemente mover esto dentro de nuestro componente para solucionar este problema.
Si creamos esa función allí, entonces tenemos acceso a accesorios porque ahora estamos dentro de nuestra
función componente y ahora podremos llamar a navegar aquí. Podemos llamar a navegar y quiero ir a un nombre
de ruta y, por supuesto, el nombre de la ruta a la que quiero ir se puede encontrar en nuestro navegador
es categoría comidas correctas, porque queremos cargar todas las comidas para la categoría elegida.
Así que vamos a las comidas de categoría aquí y si agregamos esto y lo guardamos, vemos que nuestro estilo
está un poco roto, lo arreglaré en un segundo, pero la navegación funciona,
también tenemos este efecto de opacidad, así que está funcionando . Ahora arreglar el estilo es fácil, simplemente lo perdimos porque
envolví la opacidad táctil alrededor de mi
vista, solo necesitamos agregar este estilo aquí que agrega el margen alrededor de nuestro artículo y así sucesivamente a la
opacidad táctil en lugar de esa vista aquí y con eso, recuperamos ese estilo y ahora está funcionando como debería.
La pregunta más interesante es, ¿cómo podemos configurar nuestro título de encabezado? Ahora para eso, tenemos un par de opciones,
echemos un
vistazo a la opción número uno. En cada componente React que cargará como
pantalla, lo que significa lo que asigna a dicho nombre de pantalla en, por ejemplo, el navegador de pila, puede agregar una propiedad.
Ahora tenga en cuenta que la pantalla de categorías es, por supuesto, un componente Reaccionar, pero técnicamente es una función de
Javascript, ¿verdad?
Es una función que recibe el argumento props y luego ejecuta este cuerpo que devuelve algunos jsx
y, por lo tanto, React puede usar esto como un
componente, pero técnicamente, es una función Javascript.
Ahora las funciones de Javascript son solo objetos, eso
es Javascript, las
funciones son objetos y en los objetos, podemos agregar propiedades. Entonces, la pantalla de categorías es solo un objeto Javascript,
por
lo tanto, podemos agregar una propiedad después de crearla.
Entonces, aquí, después de definir nuestra función de pantalla de categorías y, por lo tanto, este objeto, podemos acceder a él y podemos agregar
una propiedad con la notación de punto, así es como funciona Javascript, simplemente puede agregar
dicha propiedad.
Ahora puede agregar una propiedad especial aquí para la cual se verá React navigation y esa es la propiedad
de opciones de navegación.
No tiene que agregarlo y eso no será un problema
si no lo hace, no lo hemos hecho hasta ahora, pero puede agregarlo, si lo agrega, React lo respetará. navegación.
Ahora hay un montón de opciones que puede configurar allí y, por supuesto, puede encontrar una lista
completa en los documentos oficiales.
En la forma más simple, simplemente asigna un objeto Javascript aquí con ese grupo
de opciones que ahora puede configurar en este objeto y la opción que me interesa aquí es el título del
encabezado, que simplemente se puede establecer en un texto, por ejemplo categorías de comidas porque estamos en la pantalla de categorías, por lo que
sería un título apropiado. Si guardamos esto, ahora
verá las categorías de comidas como un título aquí en el encabezado.
Ahora también puede diseñar el encabezado aquí con la ayuda de la propiedad de estilo del encabezado, esto
toma un objeto de estilo en el que generalmente puede configurar lo que puede configurar como estilos en las vistas
y allí, puede agregar un color de fondo que es El estilo más común que normalmente aplica.
Ahora quiero configurar un color aquí y usaré un enfoque que usé anteriormente
en el curso, agregaré una carpeta de constantes y allí agregaré colores. archivo js en el que luego exportaré un objeto Javascript donde se configuran todos
los colores que quiero usar una y otra vez en la aplicación.
Allí, configuraré un color primario para el que preseleccioné un código hexadecimal de # 4a148C pero, por supuesto, puede experimentar con diferentes
colores si lo desea y configuraré un color de acento o un color secundario cuyo código hexadecimal
es # ff6f00 y estos son solo los colores que elegí, como
mencioné, puedes usar diferentes, por supuesto. De vuelta en la pantalla de categorías,
ahora quiero usar colores y para esto, necesita importarlo, importar colores con una C mayúscula, que es solo
una convención que estoy usando para indicar que esta es una constante, de constantes / Colores , también nombrado con una C
mayúscula y luego aquí usamos Colores. primaryColor por ejemplo. Si haces esto, verás que tu encabezado ahora
tiene este color púrpura oscuro que elegí. Eso hace que el título sea un poco difícil
de leer, pero afortunadamente, también puedes diseñarlo, no con el estilo del encabezado porque ese es
solo el cuadro para el encabezado, por así decirlo, no su contenido, pero el título se puede diseñar con el color de tinte del encabezado y
nuevamente, los documentos oficiales es el lugar donde puedes aprender todo sobre estas opciones disponibles, así
es como sé sobre
ellas, ahí es donde leerías sobre ellas.
Ahora el color de tinte del encabezado siempre puede ser un color, por ejemplo, blanco aquí, que simplemente se
ajusta a mi color predeterminado y ahora ves que es blanco. Por supuesto, es posible que también desee un aspecto diferente para Android e
iOS, es posible que desee ver dónde se ve más iOS-ish, lo que significa que
no tiene un fondo de color, sino solo un texto de color y puede lograrlo con la buena API
de plataforma anterior que aprendió anteriormente en el curso. Podemos usar la API de la plataforma para
cambiar dinámicamente qué colores usamos aquí en función de la plataforma en la que se ejecuta nuestra aplicación.
Entonces, para el color de fondo, podemos usar la plataforma. OS y ver si eso es Android,
en cuyo caso quiero usar el color primario, de lo contrario, en esta expresión ternaria, no usaré color,
por lo que podemos usar blanco aquí, por ejemplo, un fondo blanco normal o simplemente no configurar color en absoluto como
esto y luego obtendrá el color de fondo predeterminado. Y para el color de tinte, es lo
mismo, compruebo si el sistema operativo es Android en el que
el color del texto debe ser blanco, de lo contrario lo estableceré en Colores. primaryColour y con eso, ahora tienes más iOS, ese aspecto más
típico de iOS aquí en iOS y tienes el aspecto predeterminado de Android, que es más colorido en Android.
Así es como puede configurar las opciones de
navegación aquí, ahora, ¿qué pasa con esta pantalla, sin embargo, dónde vamos a nuestros detalles aquí, a las comidas italianas
o a las comidas rápidas y fáciles? Sería bueno si pudiéramos ver rápido y fácil aquí o italiano aquí en el encabezado
en ese caso.
Así que eso es lo siguiente que debemos ocuparnos y para esto, necesitamos pasar alguna
información de esta pantalla a esta pantalla. Así que veremos cómo funciona eso en el próximo video.