La mayoría de nuestros archivos no necesitan cambiar.
Sin embargo, lo que necesitaremos cambiar es lo que sucede en los archivos de navegación y la carpeta
de navegación en la aplicación J. S. es posible que recuerde renderizar el contenedor
de navegación aquí y el contenedor de navegación es solo un componente personalizado aquí donde al final tenemos nuestra lógica
para verificar si el usuario está autenticado y luego representamos un navegador de tienda que es nuestro navegador de
ruta creado aquí con navegación de reacción y ahí es donde las cosas tienen que cambiar ahora.
Ahora comencemos con el contenedor de navegación.
Ya no necesitaremos este código aquí, donde navegaremos manualmente a otro lugar si el usuario está autenticado porque
verá más adelante que ahora se manejará de manera diferente con esta configuración basada en componentes para
que pueda eliminar el hecho aquí.
Keep está desactivado aquí, aunque puede eliminar la referencia aquí y también eliminarla allí y cuando se trata de
las importaciones aquí, ya no necesitamos dos ganchos aquí y todos ya no necesitamos esta importación.
Así que solo nos queda el navegador de la tienda y eso tampoco es realmente algo que necesitemos aquí.
No estamos agregando un navegador de la tienda como un componente como este, donde luego nos referimos a
la configuración general del archivo del navegador de la tienda porque esa configuración general, por supuesto, está configurada
con la vieja lógica de tener esa configuración de registro global que es simplemente ya no funciona con react
navigation 5.
En cambio, ahora tenemos que migrar todo eso al nuevo enfoque de este enfoque basado en componentes
y hacerlo.
Quiero comenzar bastante simple en el contenedor de navegación.
Configuraré un nuevo navegador de pila que es solo un navegador falso por ahora.
Entonces, ¿vio cómo funciona en general antes de que luego apliquemos esto a
nuestra aplicación real para eso?
Agreguemos aquí la importación desde at react.
Barra de navegación nativa.
Y a partir de ahí necesitamos importar la navegación al contenedor de navegación.
Ahora eso puede ser confuso porque nuestro propio componente aquí es todo el contenedor de navegación con nombre.
Entonces, para evitar confusiones aquí, cambiaré el nombre de nuestro propio componente aquí al navegador de aplicaciones o como quieran nombrarlo, así
que lo renombraré aquí y todo para evitar confusiones, aunque técnicamente no es necesario en el
componente de la aplicación en la aplicación, sí lo haré importado como navegador de aplicaciones Cambiaré el nombre del archivo al navegador
de aplicaciones e importaré desde el navegador de aplicaciones aquí en el componente de la aplicación, así que ajuste la ruta de importación para
incluir ese nuevo nombre de archivo.
Y luego aquí renderizo el navegador de aplicaciones.
Ahora acabo de hacer estos cambios de nombre para evitar confusiones.
La parte más importante ocurre dentro de esa aplicación Navigator que anteriormente era nuestro contenedor de navegación.
Ahora estamos importando el contenedor de navegación de React Native.
Pero papá será un componente diferente al que construimos en el pasado.
Simplemente compartió el mismo nombre, por lo que le cambié el nombre por más importante que este contenedor de navegación.
Por el momento, importamos algo de la pila de barras de navegación de reacción de anuncios.
Y este es ahora un paquete que no existe y que aún no hemos instalado.
Así que paremos este proceso nuevamente.
Y con npm install dash dash safe, instalemos en la pila de barra de navegación de reacción para que NPM instale Ashutosh safe en
la pila de barra de reacción de navegación.
Esto instalará la lógica de navegación de la pila de EE. UU. Y todos podemos instalar una
serie de paquetes ya porque lo necesitaremos más tarde y eso es en el dibujo de barra diagonal de reacción
que luego nos dará la navegación basada en el dibujo que también necesitará, así que esperemos un D a los comandos de instalación para finalizar y
luego con el arranque del motor podemos volver a abrir este servidor de exposición, así que ahora instalamos la pila de Vietnamization.
Podemos importar algo de él y eso es algo como D crear el navegador de pila.
Ahora crear stack Navigator es una función que ya conocemos en Shop Navigator, que todavía utiliza la navegación de
reacción anterior en la que también importamos para crear el navegador de pila desde la navegación de reacción o
si estaba trabajando para este paquete desde un paquete separado.
Pero también tuvimos crear navegador de pila allí y crear navegador de dibujo termina en.
Ahora utilizamos crear navegador de pila para crear nuestra configuración de configuración de nuestro registro de navegación para esta parte de nuestra aplicación, podría decirlo para la descripción
general de los productos del detalle del producto y la pantalla de
la tarjeta que reunimos en una pila y luego tuvimos múltiples pilas de este tipo para componerlos
para reunirlos en nuestro navegador de dibujo que finalmente combinamos con la pantalla apagada en el navegador de interruptores.
Ahora, de vuelta a nuestro navegador de aplicaciones, ¿qué hacemos con crear un navegador de pila aquí?
Ahora funciona de manera diferente.
Ahora lo usamos para crear un nuevo componente con él y lo nombraré mi pila.
El nombre depende totalmente de usted, pero simplemente llame para crear un navegador de pila como este y listo.
Y esto ahora es un gran cambio.
Ahora no pasa ningún objeto para crear el navegador de pila para configurarlo.
En cambio, es una función que no quiere un objeto.
Es una función que no necesita ningún objeto, entonces, ¿qué hace entonces?
¿Cuál es mi pila? Mi pila es ahora un componente de reacción y la usamos como tal aquí en el navegador de aplicaciones para
ser precisos.
Necesitamos envolver toda la lógica de navegación con el componente contenedor de navegación que estamos importando
desde react navigation native.
Puede pensar en ese componente del contenedor de navegación básicamente como la versión del componente del contenedor de la aplicación
que creamos con create container en la configuración anterior.
Justo allí tuvimos que envolver nuestro navegador terminado con crear contenedor de aplicaciones.
Ahora tenemos que ajustar nuestra configuración de navegación basada en componentes a realizar con el contenedor de navegación.
Así que aquí configuramos nuestra lógica cuando se trata de qué páginas queremos cargar.
Y aquí ahora usamos mi stack como un componente de reacción, pero no así.
Pero en cambio aquí necesitamos el componente del navegador DOT.
Entonces, mi pila realmente es un objeto con una propiedad de navegador y los valores almacenados
en esa propiedad ahora son un componente.
Entonces, ahora podemos crear ese componente y, entre el impuesto de apertura y cierre de este
componente, ahora ponemos básicamente las diferentes pantallas que queremos que formen parte de esa pila.
Entonces, lo que teníamos aquí en el navegador de la tienda tenía dentro de este objeto que pasamos para crear el navegador de la
pila en este mapa de componentes de la pantalla y sus nombres.
Eso es lo que estamos configurando aquí entre esta etiqueta de apertura y cierre.
Por lo tanto, podría pensar que lo que hacemos es agregar el componente de pantalla de resumen del producto a la derecha.
Este es uno de nuestros componentes. Agregaríamos una importación que no hemos hecho aquí porque está
mal, pero se podría pensar que casi lo hacemos bien.
Sin duda, esta sería la pantalla que queremos tener como parte de este navegador, pero no tendría
un nombre.
Ahora necesitamos un nombre para poder navegar a él, por ejemplo, para que podamos activar una navegación en algún lugar
de nuestra aplicación.
Es por eso que tenemos un nombre aquí también en la configuración anterior.
Entonces, en cambio, hacemos algo diferente.
Nuevamente usamos mi pila de este objeto allí arriba y ahora una segunda propiedad que tiene la propiedad de pantalla al igual que
la propiedad del navegador, la propiedad de pantalla también contiene un componente de reacción y, por lo tanto, podemos representarlo
de esta manera.
Este es ahora un componente que nos permite definir una pantalla que debería ser parte de ese navegador
de pila aquí y lo configuramos con la ayuda de accesorios ahora porque estamos trabajando con un componente aquí para que la
configuración funcione con accesorios como siempre es el Cuando trabajamos con componentes para darle un nombre a esta pantalla,
agregamos un nombre y ahora podemos usar ese nombre que usamos aquí. Resumen de productos para poder agregar este nombre y permitir
que la navegación sepa qué componente cargar cuando apuntamos a este nombre. cuando hacemos eso con una
acción de inmigración, por ejemplo, agregamos un segundo accesorio, el accesorio del componente y esto debería mantener un puntero en
el componente que queremos cargar cuando queremos ir a esta pantalla con este nombre.
Entonces, para esto, voy a importar la pantalla de resumen de productos aquí desde nuestra carpeta de pantallas para comprar la subcarpeta y luego la pantalla de
resumen de productos.
Así que ahora lo necesitamos y aprobé está aquí.
Ahora importante, no creamos el componente aquí.
Solo señalamos que solo usamos su nombre que se exporta desde ese archivo.
Y con esto ahora tenemos nuestra primera pequeña pila configurada aquí.
Ahora comentemos esta importación desde el navegador de la tienda.
Ya no lo necesitamos por el momento.
Guardemos todo y lanzamos el suyo en Android, digamos.
Y cuando lo hace, crea el paquete javascript y se abre en el dispositivo Android.
Y lo que verá es nuestra pantalla de resumen de productos.
Por supuesto, se ve un poco diferente.
Por supuesto, le faltan los botones de encabezado.
Falta toda la configuración del encabezado.
El título es incorrecto, pero eso tiene sentido porque ahora no estamos usando el navegador antiguo
donde teníamos toda esta configuración, sino la nueva, y esto es solo una prueba de que funciona y de cómo funciona.
Ahora, con este conocimiento en mente, dejemos este pequeño ejemplo aquí y portemos toda nuestra configuración de navegación
aquí a esta nueva lógica.