Bueno, para llegar a nuestras otras pantallas, necesitamos algo en lo que podamos hacer clic, que podamos tocar.
Más tarde tendremos nuestra cuadrícula de categorías aquí y trabajaremos en esto también en este módulo,
pero solo para comenzar con la navegación, agregaré un botón, así que
en la pantalla de categorías donde tengo este texto, quiero agregar un botón que puedo tocar para ir a la
pantalla de categoría de comidas.
Así que aquí, agregaré este botón React Native, el que está incorporado y estableceré un título para ir a las comidas y cuando
presionamos este botón, quiero activar una función que realmente me lleve a la pantalla de comidas
de categoría.
Ahora configuramos la pantalla de
comidas de categoría aquí, pero ¿cómo podemos ir ahora? Bueno, para esto, es importante saber que cualquier componente que cargó con
la ayuda de la navegación React obtiene un accesorio especial que se pasa automáticamente, por lo que cualquier componente asignado a uno de sus
identificadores de pantalla aquí, por lo
que en este caso estos tres componentes, obtendrán el apoyo especial Los componentes anidados allí no lo obtienen automáticamente,
solo los componentes de nivel superior que asignó a los identificadores en sus navegadores.
Así que es un accesorio especial del que estoy
hablando, echemos un vistazo.
Entonces, aquí en accesorios, podemos extraerlo y simplemente comencemos por los accesorios de registro de la consola aquí, para que
podamos tener una idea y por ahora para que no tengamos un error,
simplemente pasaré una función vacía aquí a onPress .
Así que guardemos esto y veamos qué hay dentro de los accesorios.
Esto se vuelve a cargar, tenemos el botón que no hace nada y aquí en la consola, de hecho, vemos que los accesorios
no están vacíos.
Este es nuestro
objeto de accesorios y allí tenemos un accesorio de navegación que en sí mismo es un objeto
que tiene algunas acciones, está bien, pero que también tiene, por ejemplo, pop, push, replace, reset y una función de navegación, por lo que hay un montón de
funciones allí, funciones que nos ayudan a moverse en nuestra aplicación.
También tiene un accesorio de pantalla, por lo que nuestro accesorio tiene accesorios de pantalla que podemos ignorar por ahora.
Entonces, esto que hay dentro de los accesorios y este accesorio de navegación, esta parte de navegación que está
allí, realmente
nos ayuda, así que este accesorio de navegación. Nos ayuda aquí porque cuando presionamos este botón y lo hago
con una función de flecha en línea aquí, por supuesto, podría tener una función separada que
cree y que luego asigne
a onPress, esto nos ayuda y esto puede usarse para navegar
Entonces, en la navegación de accesorios, la navegación es este accesorio especial que estamos obteniendo por React navigation porque cargamos
este componente de pantalla de categorías con la ayuda de nuestro navegador
aquí, este accesorio de navegación especial tiene un método de navegación y
este es su método principal,
el más importante método para moverse con la ayuda de React navigation. ¿Cómo funciona navegar?
Navegar toma un objeto como argumento y en este objeto, puede configurar el nombre de la ruta a la que
desea navegar.
Entonces, pasa una propiedad de nombre de ruta en este objeto que pasa para navegar y ahora es importante, el nombre
de ruta que especifique aquí debe ser uno de los tres nombres de ruta que configuré aquí.
Ahora los nombres de ruta son los identificadores que muestra que eligió delante de estos dos puntos, por lo que los nombres de propiedad
en este objeto que pasó para crear el navegador de pila.
Estos son sus nombres de ruta
y esto es lo que ahora puede usar para navegar. Entonces, aquí quiero ir a la categoría de comidas,
este es el nombre
de ruta que quiero usar, por lo tanto, aquí, apunto a
la categoría de comidas pero no de esta manera, esto en Javascript buscaría una variable de categoría de comidas, en lugar de una
cadena llamada comidas de categoría porque esto básicamente le dirá a Javascript y React navigation al final que desea
ir a la ruta que tiene el nombre de comidas de categoría y esa es esta ruta aquí.
Entonces, así es como puedes ir allí.
Si ahora guardamos esto y hacemos clic en ir a las comidas aquí, verá que vamos a la pantalla de comidas, sacamos esta
bonita animación de la caja, obtenemos este botón de retroceso que se ve exactamente como esperamos
que se vea iOS y todo eso funciona de inmediato sin ningún trabajo adicional, sin verificación, sin código de
animación manual, lo sacamos de la caja gracias a la biblioteca de navegación React.
Entonces, con esto, podemos ir y volver a nuestra pantalla de comida, a la pantalla de categoría de comida y luego a
la pantalla de categoría y esto también funciona en Android. Allí obtenemos la navegación de enrutamiento específica de Android que
se ve un poco diferente a la de iOS, es la animación de navegación que esperaría en Android,
por supuesto, también puede usar el botón de retroceso del dispositivo para luego regresar.
Así es como puede navegar a una pantalla diferente y tenga en cuenta que navegar, por supuesto, no
dice nada sobre la dirección que queremos ir, no le dice a React navigation si debe reproducir
esa animación hacia adelante o hacia atrás . React navigation detecta esto automáticamente porque, bajo el capó, gestiona
esta pila de páginas de las que estaba hablando, esta pila de pantallas y en esta pila, en este
momento cuando iniciamos la aplicación, solo tenemos la pantalla de categoría, pero cuando presiono este botón ,
navegar al final le dice a React navigation que, dado que estamos haciendo esto dentro de un componente que
se cargó con un navegador de pila, queremos navegar a una pantalla diferente que se debe
presionar en la parte superior de la pila. Este es simplemente el comportamiento predeterminado y, por lo tanto, sabe
que quiere avanzar porque se empujó una nueva ruta, lo que significa que se agrega a la pila, queremos avanzar y
cuando hacemos clic en el botón Atrás que agrega automáticamente, saca esta pantalla de la pila y, dado que elimina algo de la
pila, sabe que debería reproducir la animación posterior. Así que eso es lo que
sucede detrás de escena, realmente no tienes que preocuparte por eso y eso
es lo bueno, solo quiero que sepas que eso, que React navigation está haciendo el trabajo
pesado por ti y maneja esta pila de pantalla y las animaciones correspondientes que necesita, por lo tanto, debajo del capó para usted.
De acuerdo, eso nos permite ir y venir o avanzar y retroceder.
Ahora su desafío para la próxima conferencia, donde lo haremos juntos, es que usted también hará lo mismo en la
pantalla de la categoría de comida y se asegurará de que también podamos ir a
la pantalla MealDetailScreen desde allí. No debería ser demasiado difícil, en la próxima conferencia, lo haremos juntos.