Quiero comenzar con la forma más básica de navegación y también la forma más común de navegación que
tienes en cualquier aplicación móvil y así es como ir y venir entre pantallas y para esto
configuraremos una llamada pila y navegador porque páginas o pantallas.
Usaré estas palabras como sinónimos aquí.
Por lo tanto, las páginas y las pantallas se gestionan básicamente en una pila de páginas.
Y cada vez que vaya a una nueva pantalla, se colocará en la parte superior de esa pila en la pantalla superior de
una pila, siempre es la pantalla que está visible.
Y cuando haces clic en el botón Atrás, aparece esta pantalla en la que estabas.
Y como siempre ve en la aplicación la pantalla superior, verá la pantalla debajo de la que es la pantalla
de la que vino.
Por eso se llama Stack Navigator.
Ahora esa es la furia.
Simplemente usémoslo y quedará muy claro.
Importamos desde reaccionar.
La navegación y su nombre eran el nombre de la función.
De hecho, necesitamos crear un navegador de pila de este tipo es crear un navegador de pila.
Ahora, una nota importante es que esta sintaxis es correcta si está utilizando la versión de navegación de reacción gratuita si
está utilizando la aversión a la navegación de reacción porque cambió ligeramente, entonces necesita instalar un paquete adicional como se
mencionó en una conferencia anterior.
Debe ejecutar npm install dash dash guardar reaccionar dash dash navigation dash stack e instalar este paquete adicional y con él instalado importa importar crear stack
navigator desde reaccionar como dash dash de navegación en lugar de reaccionar navegación que es un ajuste menor que
no tiene que hacer cuatro cree un navegador de pila y cuando creamos nuestros navegadores, por ejemplo,
los toques o el navegador de sorteo más adelante, tendrá los respectivos paquetes que necesita para instalar los
toques del tablero de navegación de reacción y así sucesivamente, todo eso está cubierto en la conferencia
que encontrará antes de esta conferencia.
Ahora aquí grabé este curso con la versión de navegación de reacción gratuita, que de lo contrario es exactamente la
misma.
Es solo la importación lo que difiere y, por lo tanto, importaré desde la navegación de reacción aquí.
Pero si sigue la Versión 4, reacciona bash navigation dash stack un paquete adicional
que debe instalar.
Entonces, así es como reacciona la navegación que funciona esta biblioteca, crea los llamados navegadores que están
al final solo podría decir que los objetos realmente reaccionan componentes, ya que resultará que contiene toda la configuración de navegación que
contiene toda la información de las diferentes pantallas que tiene y cuáles hará
el trabajo pesado al cargar diferentes pantallas y reproducir agradables transiciones suaves para ir de
A a B por ti.
Por lo tanto, debemos importar crear el navegador de pila y luego simplemente podemos llamar que ahora crear navegador de pila
toma al menos un argumento y ese es un objeto de JavaScript donde configuramos las diferentes pantallas que
queremos poder mover ahora y esta aplicación que quiero para comenzar en la pantalla de categorías y si toco
una categoría allí quiero ir a la pantalla de comidas de categoría y si luego toco una receta
allí en una comida quiero ir a la pantalla de detalles de comida, así que necesitaremos estos tres pantallas en
nuestro navegador de pila para que estas sean las tres pantallas entre las que puede moverse usando este patrón de
pila empujando sus páginas y sacándolas y por qué no necesitamos favoritos y filtros porque los filtros se agregarán
más tarde con la ayuda de una barra lateral será una alternativa a esta pila aquí y los favoritos también
como alternativa a esta pila podremos ir allí con toques más tarde pero no ahora.
Entonces, comencemos con esta navegación básica basada en la pila donde podemos avanzar y retroceder
entre las categorías de la pantalla de la categoría de comidas y la pantalla detallada detallaremos la navegación de reacción
sobre estas tres pantallas registrándolas como pares de valores clave. su elección, por ejemplo, categorías, pero este nombre depende de usted, ya
que una convención de nombre de propiedad es comenzar con una letra mayúscula aquí, por
cierto, pero no tiene que hacerlo técnicamente.
Por lo tanto, utiliza cualquier identificador que desee como nombre de propiedad en este objeto
que está pasando para crear el navegador de pila y ahora el valor en su forma más simple simplemente es un puntero en el
componente de reacción que desea cargar como pantalla para esta pantalla.
Entonces, en mi caso, esa sería la pantalla de categorías. Importar todo esto Importar todas las pantallas de pantalla desde
la pantalla de categoría de pantallas. Puedo importar esto porque esta es mi exportación predeterminada.
Así que ahora mapeamos estas dos categorías y esto nos permite luego decirle a la biblioteca de reacción que estamos
usando que debería cargar la pantalla de categoría.
Ahora, como dije, esta no es la única pantalla que necesito, también quiero tener la categoría de comidas.
Así que estos son los sistemas de la segunda pantalla. Esta pantalla presentará todas las comidas para la
categoría elegida para la que tenemos una serie de componentes y esa es la pantalla de comidas de categoría
que preparamos, la cual importamos de las pantallas. Pantalla de comidas de categoría. La forma en que mencioné que esta es la forma más simple
de mapeo simplemente teniendo el nombre de la propiedad y luego un puntero en el
componente que desea cargar, también puede pasar el objeto aquí y establecer la propiedad de pantalla en este objeto y luego
apuntar al El componente que desea cargar.
Ahora, ¿por qué harías eso?
Debido a que ahora también puede configurar una configuración adicional aquí, además de la pantalla, puede configurar algunas opciones
predeterminadas para la pantalla y así sucesivamente, pero esto no es algo de
lo que tengamos que preocuparnos en este momento. solo quiero mencionar que este es el
acceso directo, esta es la forma más larga de decirle a la navegación de reacción qué
pantallas deben cargarse para qué identificador hablando, que necesitamos un tercer identificador, por supuesto, y ese es el
identificador que debería cargar nuestra pantalla detallada. nómbrelo detalle de comida y quiero señalar mi pantalla detallada de comida, así que
importaré la pantalla de detalle de comida de Y ahora vamos a la carpeta de pantallas y allí está la pantalla detallada de comida
y nuevamente usaré el acceso directo aquí.
Podríamos usar esa forma más larga, pero usaré ese acceso directo en el punto en la pantalla detallada de comida.
Entonces, con esa configuración básica, estamos diciendo que la navegación reaccione.
Hola, estas son las pantallas que podrán moverse ahora, sin embargo, los datos por sí solos no harán mucho.
Por qué.
Debido a que estamos creando ese navegador de pila, pero no estamos haciendo nada con él, cambiemos este navegador de
creación de pila que en realidad devuelve un contenedor de navegación y resulta ser un componente de reacción.
Todo se llama como navegador de comidas.
Suena como un nombre apropiado porque eso es lo que tenemos al final aquí.
Y ahora estamos almacenando el componente de reacción creado por el navegador de la pila,
que es básicamente un componente de reacción con todo el trabajo pesado de cargar diferentes pantallas y reproducir animaciones. Este componente de
reacción se almacena en el navegador de comidas.
Ahora podríamos exportar el navegador de comidas aquí e intentar usarlo así y capturarnos para mostrarlo en la pantalla y
ver qué sucede, pero en realidad la navegación funciona de manera un poco diferente.
También debe crear un contenedor de aplicaciones en este contenedor de aplicaciones que necesita para ajustar su ruta.
Entonces, su navegador principal en este caso solo tenemos uno, solo tenemos que apilar Navigator.
Así que envuelvamos esto con esto.
Vamos a envolver las comidas para navegar o recrearlas llamando a crear contenedor de aplicaciones y luego
simplemente pasar el navegador de comidas como argumento crear contenedor de aplicaciones.
También crea un contenedor de navegación.
Entonces también te da un componente de reacción.
Pero este no es realmente el componente de reacción.
Debe usar su código ASX porque ahora tiene todos los metadatos sobre la navegación en general sobre la
navegación de reacción, etc.
Entonces, este es simplemente un patrón que necesita para envolver su ruta con su navegador más importante y usar este componente de
respuesta de retorno en su código J es X, luego básicamente realiza la configuración que siempre tendrá cuando
trabaje con la navegación de reacción más adelante también aprenderá cómo usar múltiples navegadores en una aplicación.
Por cierto, por el momento tenemos este y exportamos este componente que es el final crea.
Ahora, en la búsqueda de aplicaciones, podemos comenzar a usar este componente.
Entonces, ¿vimos algo en la pantalla? Vamos a importar el navegador de comidas desde el navegador de comidas
de navegación.
Ahora, como mencioné, el navegador de comidas ahora es solo un componente de reacción, así que al final lo que
podemos hacer es simplemente devolver esto en lugar de devolver nuestra vista con nuestro texto aquí.
Devolveré el navegador de comidas y, dado que es un componente de reacción, simplemente puedo
usar el código de J Isaac como este con papá si guardamos esto.
Echamos un vistazo a nuestra aplicación a medida que
se recarga y es posible que deba volver a cargarla manualmente.
Debería ver la pantalla de categorías una vez que se vuelve a cargar y, por supuesto, esto es enorme porque esto
significa que esto funciona.
Ahora, tenga en cuenta también que, de forma predeterminada, todos obtienen un buen encabezado que tiene la plataforma
predeterminada para buscar IO s, es limpio y plano, tiene esta delgada línea debajo para Android, es más dimensional libre porque todo
tiene una ligera sombra.
Ahora, por supuesto, le falta un título y aprenderá cómo podemos agregar uno en este módulo,
pero lo sacamos de la caja y automáticamente respeta todas las muescas que pueda tener para mantenerse tan lejos que tiene
aquí, por lo que utiliza automáticamente tal vista de área segura y eso es todo lo que mencioné en el
último módulo del curso mientras tiene este componente y a veces lo necesita, por ejemplo, cuando crea una aplicación
con navegación de reacción La navegación de reacción ya envuelve sus vistas en una vista de área segura, al menos lo hará gran parte
del trabajo que tendría que hacer de lo contrario se asegurará de que su encabezado se vea
bien y eso es una gran cosa porque crear manualmente un encabezado que se vea bien en todos los
dispositivos es realmente bastante trabajo.
Entonces eso es lo que tenemos aquí.
La pregunta obvia ahora es cómo podemos llegar a nuestras otras pantallas.