1 00:00:02,410 --> 00:00:05,910 La mayoría de nuestros archivos no necesitan cambiar. 2 00:00:06,040 --> 00:00:12,220 Sin embargo, lo que necesitaremos cambiar es lo que sucede en los archivos de navegación y la carpeta 3 00:00:13,000 --> 00:00:19,540 de navegación en la aplicación J. S. es posible que recuerde renderizar el contenedor 4 00:00:19,570 --> 00:00:25,510 de navegación aquí y el contenedor de navegación es solo un componente personalizado aquí donde al final tenemos nuestra lógica 5 00:00:25,580 --> 00:00:31,330 para verificar si el usuario está autenticado y luego representamos un navegador de tienda que es nuestro navegador de 6 00:00:31,330 --> 00:00:36,550 ruta creado aquí con navegación de reacción y ahí es donde las cosas tienen que cambiar ahora. 7 00:00:36,550 --> 00:00:39,410 Ahora comencemos con el contenedor de navegación. 8 00:00:39,430 --> 00:00:45,640 Ya no necesitaremos este código aquí, donde navegaremos manualmente a otro lugar si el usuario está autenticado porque 9 00:00:46,150 --> 00:00:52,090 verá más adelante que ahora se manejará de manera diferente con esta configuración basada en componentes para 10 00:00:52,780 --> 00:00:55,040 que pueda eliminar el hecho aquí. 11 00:00:55,150 --> 00:01:02,920 Keep está desactivado aquí, aunque puede eliminar la referencia aquí y también eliminarla allí y cuando se trata de 12 00:01:02,920 --> 00:01:09,620 las importaciones aquí, ya no necesitamos dos ganchos aquí y todos ya no necesitamos esta importación. 13 00:01:09,760 --> 00:01:17,020 Así que solo nos queda el navegador de la tienda y eso tampoco es realmente algo que necesitemos aquí. 14 00:01:17,110 --> 00:01:24,040 No estamos agregando un navegador de la tienda como un componente como este, donde luego nos referimos a 15 00:01:24,040 --> 00:01:30,760 la configuración general del archivo del navegador de la tienda porque esa configuración general, por supuesto, está configurada 16 00:01:30,760 --> 00:01:38,080 con la vieja lógica de tener esa configuración de registro global que es simplemente ya no funciona con react 17 00:01:38,080 --> 00:01:39,140 navigation 5. 18 00:01:39,790 --> 00:01:46,990 En cambio, ahora tenemos que migrar todo eso al nuevo enfoque de este enfoque basado en componentes 19 00:01:46,990 --> 00:01:47,950 y hacerlo. 20 00:01:48,130 --> 00:01:51,980 Quiero comenzar bastante simple en el contenedor de navegación. 21 00:01:52,090 --> 00:01:57,970 Configuraré un nuevo navegador de pila que es solo un navegador falso por ahora. 22 00:01:57,970 --> 00:02:04,240 Entonces, ¿vio cómo funciona en general antes de que luego apliquemos esto a 23 00:02:04,240 --> 00:02:07,270 nuestra aplicación real para eso? 24 00:02:07,410 --> 00:02:10,000 Agreguemos aquí la importación desde at react. 25 00:02:10,020 --> 00:02:13,020 Barra de navegación nativa. 26 00:02:13,020 --> 00:02:19,070 Y a partir de ahí necesitamos importar la navegación al contenedor de navegación. 27 00:02:19,080 --> 00:02:24,460 Ahora eso puede ser confuso porque nuestro propio componente aquí es todo el contenedor de navegación con nombre. 28 00:02:24,600 --> 00:02:31,890 Entonces, para evitar confusiones aquí, cambiaré el nombre de nuestro propio componente aquí al navegador de aplicaciones o como quieran nombrarlo, así 29 00:02:31,890 --> 00:02:37,260 que lo renombraré aquí y todo para evitar confusiones, aunque técnicamente no es necesario en el 30 00:02:37,920 --> 00:02:45,330 componente de la aplicación en la aplicación, sí lo haré importado como navegador de aplicaciones Cambiaré el nombre del archivo al navegador 31 00:02:45,420 --> 00:02:53,220 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 32 00:02:53,460 --> 00:02:55,680 incluir ese nuevo nombre de archivo. 33 00:02:55,680 --> 00:02:59,030 Y luego aquí renderizo el navegador de aplicaciones. 34 00:02:59,070 --> 00:03:02,430 Ahora acabo de hacer estos cambios de nombre para evitar confusiones. 35 00:03:02,490 --> 00:03:09,300 La parte más importante ocurre dentro de esa aplicación Navigator que anteriormente era nuestro contenedor de navegación. 36 00:03:09,300 --> 00:03:12,120 Ahora estamos importando el contenedor de navegación de React Native. 37 00:03:12,120 --> 00:03:15,450 Pero papá será un componente diferente al que construimos en el pasado. 38 00:03:15,480 --> 00:03:21,690 Simplemente compartió el mismo nombre, por lo que le cambié el nombre por más importante que este contenedor de navegación. 39 00:03:21,690 --> 00:03:26,910 Por el momento, importamos algo de la pila de barras de navegación de reacción de anuncios. 40 00:03:27,120 --> 00:03:31,500 Y este es ahora un paquete que no existe y que aún no hemos instalado. 41 00:03:32,280 --> 00:03:34,440 Así que paremos este proceso nuevamente. 42 00:03:34,500 --> 00:03:43,020 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 43 00:03:43,020 --> 00:03:46,010 la pila de barra de reacción de navegación. 44 00:03:46,170 --> 00:03:51,840 Esto instalará la lógica de navegación de la pila de EE. UU. Y todos podemos instalar una 45 00:03:51,840 --> 00:03:58,380 serie de paquetes ya porque lo necesitaremos más tarde y eso es en el dibujo de barra diagonal de reacción 46 00:03:58,380 --> 00:04:06,760 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 47 00:04:06,930 --> 00:04:14,190 luego con el arranque del motor podemos volver a abrir este servidor de exposición, así que ahora instalamos la pila de Vietnamization. 48 00:04:14,190 --> 00:04:19,500 Podemos importar algo de él y eso es algo como D crear el navegador de pila. 49 00:04:19,650 --> 00:04:26,490 Ahora crear stack Navigator es una función que ya conocemos en Shop Navigator, que todavía utiliza la navegación de 50 00:04:26,490 --> 00:04:33,210 reacción anterior en la que también importamos para crear el navegador de pila desde la navegación de reacción o 51 00:04:33,210 --> 00:04:36,990 si estaba trabajando para este paquete desde un paquete separado. 52 00:04:37,200 --> 00:04:43,770 Pero también tuvimos crear navegador de pila allí y crear navegador de dibujo termina en. 53 00:04:43,880 --> 00:04:53,870 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 54 00:04:53,990 --> 00:04:58,760 general de los productos del detalle del producto y la pantalla de 55 00:04:58,760 --> 00:05:05,000 la tarjeta que reunimos en una pila y luego tuvimos múltiples pilas de este tipo para componerlos 56 00:05:05,000 --> 00:05:12,070 para reunirlos en nuestro navegador de dibujo que finalmente combinamos con la pantalla apagada en el navegador de interruptores. 57 00:05:12,090 --> 00:05:16,710 Ahora, de vuelta a nuestro navegador de aplicaciones, ¿qué hacemos con crear un navegador de pila aquí? 58 00:05:16,740 --> 00:05:18,560 Ahora funciona de manera diferente. 59 00:05:18,870 --> 00:05:25,260 Ahora lo usamos para crear un nuevo componente con él y lo nombraré mi pila. 60 00:05:25,260 --> 00:05:31,440 El nombre depende totalmente de usted, pero simplemente llame para crear un navegador de pila como este y listo. 61 00:05:31,440 --> 00:05:33,810 Y esto ahora es un gran cambio. 62 00:05:33,960 --> 00:05:39,120 Ahora no pasa ningún objeto para crear el navegador de pila para configurarlo. 63 00:05:39,170 --> 00:05:42,900 En cambio, es una función que no quiere un objeto. 64 00:05:42,900 --> 00:05:48,490 Es una función que no necesita ningún objeto, entonces, ¿qué hace entonces? 65 00:05:48,490 --> 00:05:57,720 ¿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 66 00:05:57,720 --> 00:05:58,490 ser precisos. 67 00:05:58,500 --> 00:06:04,890 Necesitamos envolver toda la lógica de navegación con el componente contenedor de navegación que estamos importando 68 00:06:04,890 --> 00:06:06,800 desde react navigation native. 69 00:06:06,870 --> 00:06:14,730 Puede pensar en ese componente del contenedor de navegación básicamente como la versión del componente del contenedor de la aplicación 70 00:06:15,270 --> 00:06:19,080 que creamos con create container en la configuración anterior. 71 00:06:19,080 --> 00:06:24,830 Justo allí tuvimos que envolver nuestro navegador terminado con crear contenedor de aplicaciones. 72 00:06:24,840 --> 00:06:31,680 Ahora tenemos que ajustar nuestra configuración de navegación basada en componentes a realizar con el contenedor de navegación. 73 00:06:32,310 --> 00:06:39,800 Así que aquí configuramos nuestra lógica cuando se trata de qué páginas queremos cargar. 74 00:06:39,870 --> 00:06:45,640 Y aquí ahora usamos mi stack como un componente de reacción, pero no así. 75 00:06:45,690 --> 00:06:50,050 Pero en cambio aquí necesitamos el componente del navegador DOT. 76 00:06:50,130 --> 00:06:58,620 Entonces, mi pila realmente es un objeto con una propiedad de navegador y los valores almacenados 77 00:06:58,620 --> 00:07:02,520 en esa propiedad ahora son un componente. 78 00:07:02,530 --> 00:07:08,110 Entonces, ahora podemos crear ese componente y, entre el impuesto de apertura y cierre de este 79 00:07:08,110 --> 00:07:13,550 componente, ahora ponemos básicamente las diferentes pantallas que queremos que formen parte de esa pila. 80 00:07:13,570 --> 00:07:20,800 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 81 00:07:21,070 --> 00:07:24,790 pila en este mapa de componentes de la pantalla y sus nombres. 82 00:07:24,850 --> 00:07:30,140 Eso es lo que estamos configurando aquí entre esta etiqueta de apertura y cierre. 83 00:07:30,190 --> 00:07:36,900 Por lo tanto, podría pensar que lo que hacemos es agregar el componente de pantalla de resumen del producto a la derecha. 84 00:07:36,910 --> 00:07:41,680 Este es uno de nuestros componentes. Agregaríamos una importación que no hemos hecho aquí porque está 85 00:07:41,980 --> 00:07:45,440 mal, pero se podría pensar que casi lo hacemos bien. 86 00:07:45,790 --> 00:07:51,430 Sin duda, esta sería la pantalla que queremos tener como parte de este navegador, pero no tendría 87 00:07:51,430 --> 00:07:52,410 un nombre. 88 00:07:52,450 --> 00:07:58,210 Ahora necesitamos un nombre para poder navegar a él, por ejemplo, para que podamos activar una navegación en algún lugar 89 00:07:58,210 --> 00:07:59,350 de nuestra aplicación. 90 00:07:59,350 --> 00:08:03,570 Es por eso que tenemos un nombre aquí también en la configuración anterior. 91 00:08:03,700 --> 00:08:05,530 Entonces, en cambio, hacemos algo diferente. 92 00:08:05,530 --> 00:08:13,090 Nuevamente usamos mi pila de este objeto allí arriba y ahora una segunda propiedad que tiene la propiedad de pantalla al igual que 93 00:08:13,570 --> 00:08:19,930 la propiedad del navegador, la propiedad de pantalla también contiene un componente de reacción y, por lo tanto, podemos representarlo 94 00:08:19,930 --> 00:08:21,160 de esta manera. 95 00:08:21,160 --> 00:08:27,820 Este es ahora un componente que nos permite definir una pantalla que debería ser parte de ese navegador 96 00:08:27,820 --> 00:08:35,620 de pila aquí y lo configuramos con la ayuda de accesorios ahora porque estamos trabajando con un componente aquí para que la 97 00:08:35,620 --> 00:08:42,430 configuración funcione con accesorios como siempre es el Cuando trabajamos con componentes para darle un nombre a esta pantalla, 98 00:08:42,460 --> 00:08:50,350 agregamos un nombre y ahora podemos usar ese nombre que usamos aquí. Resumen de productos para poder agregar este nombre y permitir 99 00:08:50,860 --> 00:08:57,370 que la navegación sepa qué componente cargar cuando apuntamos a este nombre. cuando hacemos eso con una 100 00:08:57,370 --> 00:09:04,690 acción de inmigración, por ejemplo, agregamos un segundo accesorio, el accesorio del componente y esto debería mantener un puntero en 101 00:09:05,050 --> 00:09:10,770 el componente que queremos cargar cuando queremos ir a esta pantalla con este nombre. 102 00:09:10,900 --> 00:09:22,080 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 103 00:09:22,080 --> 00:09:23,750 resumen de productos. 104 00:09:23,940 --> 00:09:27,910 Así que ahora lo necesitamos y aprobé está aquí. 105 00:09:28,020 --> 00:09:30,780 Ahora importante, no creamos el componente aquí. 106 00:09:30,810 --> 00:09:36,960 Solo señalamos que solo usamos su nombre que se exporta desde ese archivo. 107 00:09:36,960 --> 00:09:42,750 Y con esto ahora tenemos nuestra primera pequeña pila configurada aquí. 108 00:09:42,780 --> 00:09:46,240 Ahora comentemos esta importación desde el navegador de la tienda. 109 00:09:46,260 --> 00:09:48,360 Ya no lo necesitamos por el momento. 110 00:09:48,360 --> 00:09:52,670 Guardemos todo y lanzamos el suyo en Android, digamos. 111 00:09:52,830 --> 00:09:58,250 Y cuando lo hace, crea el paquete javascript y se abre en el dispositivo Android. 112 00:09:58,260 --> 00:10:01,470 Y lo que verá es nuestra pantalla de resumen de productos. 113 00:10:01,470 --> 00:10:02,790 Por supuesto, se ve un poco diferente. 114 00:10:02,790 --> 00:10:04,770 Por supuesto, le faltan los botones de encabezado. 115 00:10:04,800 --> 00:10:07,330 Falta toda la configuración del encabezado. 116 00:10:07,350 --> 00:10:13,740 El título es incorrecto, pero eso tiene sentido porque ahora no estamos usando el navegador antiguo 117 00:10:13,740 --> 00:10:21,500 donde teníamos toda esta configuración, sino la nueva, y esto es solo una prueba de que funciona y de cómo funciona. 118 00:10:21,600 --> 00:10:30,240 Ahora, con este conocimiento en mente, dejemos este pequeño ejemplo aquí y portemos toda nuestra configuración de navegación 119 00:10:30,240 --> 00:10:32,910 aquí a esta nueva lógica.