1 00:00:02,250 --> 00:00:08,640 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 2 00:00:08,640 --> 00:00:14,820 tienes en cualquier aplicación móvil y así es como ir y venir entre pantallas y para esto 3 00:00:14,820 --> 00:00:19,030 configuraremos una llamada pila y navegador porque páginas o pantallas. 4 00:00:19,110 --> 00:00:21,630 Usaré estas palabras como sinónimos aquí. 5 00:00:21,630 --> 00:00:26,040 Por lo tanto, las páginas y las pantallas se gestionan básicamente en una pila de páginas. 6 00:00:26,250 --> 00:00:32,220 Y cada vez que vaya a una nueva pantalla, se colocará en la parte superior de esa pila en la pantalla superior de 7 00:00:32,220 --> 00:00:34,570 una pila, siempre es la pantalla que está visible. 8 00:00:34,650 --> 00:00:39,710 Y cuando haces clic en el botón Atrás, aparece esta pantalla en la que estabas. 9 00:00:39,840 --> 00:00:45,600 Y como siempre ve en la aplicación la pantalla superior, verá la pantalla debajo de la que es la pantalla 10 00:00:45,600 --> 00:00:46,950 de la que vino. 11 00:00:46,950 --> 00:00:49,370 Por eso se llama Stack Navigator. 12 00:00:49,390 --> 00:00:50,490 Ahora esa es la furia. 13 00:00:50,490 --> 00:00:53,100 Simplemente usémoslo y quedará muy claro. 14 00:00:53,370 --> 00:00:55,080 Importamos desde reaccionar. 15 00:00:55,080 --> 00:00:59,870 La navegación y su nombre eran el nombre de la función. 16 00:00:59,880 --> 00:01:05,550 De hecho, necesitamos crear un navegador de pila de este tipo es crear un navegador de pila. 17 00:01:05,550 --> 00:01:11,890 Ahora, una nota importante es que esta sintaxis es correcta si está utilizando la versión de navegación de reacción gratuita si 18 00:01:11,910 --> 00:01:17,880 está utilizando la aversión a la navegación de reacción porque cambió ligeramente, entonces necesita instalar un paquete adicional como se 19 00:01:17,880 --> 00:01:19,620 mencionó en una conferencia anterior. 20 00:01:20,700 --> 00:01:29,610 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 21 00:01:30,390 --> 00:01:36,990 navigator desde reaccionar como dash dash de navegación en lugar de reaccionar navegación que es un ajuste menor que 22 00:01:36,990 --> 00:01:42,900 no tiene que hacer cuatro cree un navegador de pila y cuando creamos nuestros navegadores, por ejemplo, 23 00:01:42,900 --> 00:01:49,140 los toques o el navegador de sorteo más adelante, tendrá los respectivos paquetes que necesita para instalar los 24 00:01:49,140 --> 00:01:54,990 toques del tablero de navegación de reacción y así sucesivamente, todo eso está cubierto en la conferencia 25 00:01:55,020 --> 00:01:57,370 que encontrará antes de esta conferencia. 26 00:01:57,460 --> 00:02:03,150 Ahora aquí grabé este curso con la versión de navegación de reacción gratuita, que de lo contrario es exactamente la 27 00:02:03,150 --> 00:02:03,520 misma. 28 00:02:03,510 --> 00:02:08,370 Es solo la importación lo que difiere y, por lo tanto, importaré desde la navegación de reacción aquí. 29 00:02:08,430 --> 00:02:14,310 Pero si sigue la Versión 4, reacciona bash navigation dash stack un paquete adicional 30 00:02:14,300 --> 00:02:15,730 que debe instalar. 31 00:02:15,870 --> 00:02:22,020 Entonces, así es como reacciona la navegación que funciona esta biblioteca, crea los llamados navegadores que están 32 00:02:22,030 --> 00:02:30,090 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 33 00:02:30,090 --> 00:02:34,860 contiene toda la información de las diferentes pantallas que tiene y cuáles hará 34 00:02:34,860 --> 00:02:40,350 el trabajo pesado al cargar diferentes pantallas y reproducir agradables transiciones suaves para ir de 35 00:02:40,350 --> 00:02:42,270 A a B por ti. 36 00:02:42,270 --> 00:02:49,710 Por lo tanto, debemos importar crear el navegador de pila y luego simplemente podemos llamar que ahora crear navegador de pila 37 00:02:49,710 --> 00:02:56,130 toma al menos un argumento y ese es un objeto de JavaScript donde configuramos las diferentes pantallas que 38 00:02:56,220 --> 00:03:02,940 queremos poder mover ahora y esta aplicación que quiero para comenzar en la pantalla de categorías y si toco 39 00:03:02,940 --> 00:03:09,450 una categoría allí quiero ir a la pantalla de comidas de categoría y si luego toco una receta 40 00:03:09,450 --> 00:03:16,530 allí en una comida quiero ir a la pantalla de detalles de comida, así que necesitaremos estos tres pantallas en 41 00:03:16,770 --> 00:03:23,610 nuestro navegador de pila para que estas sean las tres pantallas entre las que puede moverse usando este patrón de 42 00:03:23,610 --> 00:03:30,300 pila empujando sus páginas y sacándolas y por qué no necesitamos favoritos y filtros porque los filtros se agregarán 43 00:03:30,300 --> 00:03:37,350 más tarde con la ayuda de una barra lateral será una alternativa a esta pila aquí y los favoritos también 44 00:03:37,350 --> 00:03:42,960 como alternativa a esta pila podremos ir allí con toques más tarde pero no ahora. 45 00:03:42,960 --> 00:03:48,990 Entonces, comencemos con esta navegación básica basada en la pila donde podemos avanzar y retroceder 46 00:03:48,990 --> 00:03:56,850 entre las categorías de la pantalla de la categoría de comidas y la pantalla detallada detallaremos la navegación de reacción 47 00:03:57,180 --> 00:04:05,500 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 48 00:04:05,530 --> 00:04:11,500 que una convención de nombre de propiedad es comenzar con una letra mayúscula aquí, por 49 00:04:11,500 --> 00:04:14,470 cierto, pero no tiene que hacerlo técnicamente. 50 00:04:14,650 --> 00:04:20,620 Por lo tanto, utiliza cualquier identificador que desee como nombre de propiedad en este objeto 51 00:04:20,740 --> 00:04:29,920 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 52 00:04:29,920 --> 00:04:34,690 componente de reacción que desea cargar como pantalla para esta pantalla. 53 00:04:34,690 --> 00:04:43,890 Entonces, en mi caso, esa sería la pantalla de categorías. Importar todo esto Importar todas las pantallas de pantalla desde 54 00:04:44,760 --> 00:04:51,740 la pantalla de categoría de pantallas. Puedo importar esto porque esta es mi exportación predeterminada. 55 00:04:51,940 --> 00:04:59,410 Así que ahora mapeamos estas dos categorías y esto nos permite luego decirle a la biblioteca de reacción que estamos 56 00:04:59,410 --> 00:05:02,920 usando que debería cargar la pantalla de categoría. 57 00:05:02,920 --> 00:05:08,690 Ahora, como dije, esta no es la única pantalla que necesito, también quiero tener la categoría de comidas. 58 00:05:08,710 --> 00:05:14,590 Así que estos son los sistemas de la segunda pantalla. Esta pantalla presentará todas las comidas para la 59 00:05:15,310 --> 00:05:21,550 categoría elegida para la que tenemos una serie de componentes y esa es la pantalla de comidas de categoría 60 00:05:21,550 --> 00:05:29,680 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 61 00:05:29,680 --> 00:05:34,720 de mapeo simplemente teniendo el nombre de la propiedad y luego un puntero en el 62 00:05:35,290 --> 00:05:42,040 componente que desea cargar, también puede pasar el objeto aquí y establecer la propiedad de pantalla en este objeto y luego 63 00:05:42,100 --> 00:05:44,470 apuntar al El componente que desea cargar. 64 00:05:44,470 --> 00:05:46,030 Ahora, ¿por qué harías eso? 65 00:05:46,090 --> 00:05:52,540 Debido a que ahora también puede configurar una configuración adicional aquí, además de la pantalla, puede configurar algunas opciones 66 00:05:52,540 --> 00:05:57,220 predeterminadas para la pantalla y así sucesivamente, pero esto no es algo de 67 00:05:57,730 --> 00:06:02,740 lo que tengamos que preocuparnos en este momento. solo quiero mencionar que este es el 68 00:06:02,740 --> 00:06:08,230 acceso directo, esta es la forma más larga de decirle a la navegación de reacción qué 69 00:06:08,230 --> 00:06:14,170 pantallas deben cargarse para qué identificador hablando, que necesitamos un tercer identificador, por supuesto, y ese es el 70 00:06:14,170 --> 00:06:21,060 identificador que debería cargar nuestra pantalla detallada. nómbrelo detalle de comida y quiero señalar mi pantalla detallada de comida, así que 71 00:06:21,090 --> 00:06:29,110 importaré la pantalla de detalle de comida de Y ahora vamos a la carpeta de pantallas y allí está la pantalla detallada de comida 72 00:06:29,150 --> 00:06:31,760 y nuevamente usaré el acceso directo aquí. 73 00:06:31,760 --> 00:06:35,830 Podríamos usar esa forma más larga, pero usaré ese acceso directo en el punto en la pantalla detallada de comida. 74 00:06:36,710 --> 00:06:40,370 Entonces, con esa configuración básica, estamos diciendo que la navegación reaccione. 75 00:06:40,370 --> 00:06:49,020 Hola, estas son las pantallas que podrán moverse ahora, sin embargo, los datos por sí solos no harán mucho. 76 00:06:49,030 --> 00:06:49,540 Por qué. 77 00:06:49,840 --> 00:06:57,600 Debido a que estamos creando ese navegador de pila, pero no estamos haciendo nada con él, cambiemos este navegador de 78 00:06:58,080 --> 00:07:05,150 creación de pila que en realidad devuelve un contenedor de navegación y resulta ser un componente de reacción. 79 00:07:05,150 --> 00:07:07,070 Todo se llama como navegador de comidas. 80 00:07:07,080 --> 00:07:10,620 Suena como un nombre apropiado porque eso es lo que tenemos al final aquí. 81 00:07:10,620 --> 00:07:15,570 Y ahora estamos almacenando el componente de reacción creado por el navegador de la pila, 82 00:07:15,570 --> 00:07:22,380 que es básicamente un componente de reacción con todo el trabajo pesado de cargar diferentes pantallas y reproducir animaciones. Este componente de 83 00:07:22,380 --> 00:07:25,160 reacción se almacena en el navegador de comidas. 84 00:07:25,170 --> 00:07:32,830 Ahora podríamos exportar el navegador de comidas aquí e intentar usarlo así y capturarnos para mostrarlo en la pantalla y 85 00:07:32,830 --> 00:07:38,410 ver qué sucede, pero en realidad la navegación funciona de manera un poco diferente. 86 00:07:38,470 --> 00:07:45,350 También debe crear un contenedor de aplicaciones en este contenedor de aplicaciones que necesita para ajustar su ruta. 87 00:07:45,440 --> 00:07:50,370 Entonces, su navegador principal en este caso solo tenemos uno, solo tenemos que apilar Navigator. 88 00:07:50,390 --> 00:07:51,900 Así que envuelvamos esto con esto. 89 00:07:51,980 --> 00:07:57,740 Vamos a envolver las comidas para navegar o recrearlas llamando a crear contenedor de aplicaciones y luego 90 00:07:57,740 --> 00:08:01,850 simplemente pasar el navegador de comidas como argumento crear contenedor de aplicaciones. 91 00:08:01,940 --> 00:08:03,880 También crea un contenedor de navegación. 92 00:08:03,950 --> 00:08:05,670 Entonces también te da un componente de reacción. 93 00:08:05,750 --> 00:08:08,120 Pero este no es realmente el componente de reacción. 94 00:08:08,120 --> 00:08:15,890 Debe usar su código ASX porque ahora tiene todos los metadatos sobre la navegación en general sobre la 95 00:08:15,890 --> 00:08:17,930 navegación de reacción, etc. 96 00:08:17,930 --> 00:08:24,680 Entonces, este es simplemente un patrón que necesita para envolver su ruta con su navegador más importante y usar este componente de 97 00:08:24,680 --> 00:08:30,260 respuesta de retorno en su código J es X, luego básicamente realiza la configuración que siempre tendrá cuando 98 00:08:30,260 --> 00:08:35,570 trabaje con la navegación de reacción más adelante también aprenderá cómo usar múltiples navegadores en una aplicación. 99 00:08:35,570 --> 00:08:41,870 Por cierto, por el momento tenemos este y exportamos este componente que es el final crea. 100 00:08:41,870 --> 00:08:44,680 Ahora, en la búsqueda de aplicaciones, podemos comenzar a usar este componente. 101 00:08:44,720 --> 00:08:56,720 Entonces, ¿vimos algo en la pantalla? Vamos a importar el navegador de comidas desde el navegador de comidas 102 00:08:56,930 --> 00:08:58,640 de navegación. 103 00:08:58,640 --> 00:09:04,040 Ahora, como mencioné, el navegador de comidas ahora es solo un componente de reacción, así que al final lo que 104 00:09:04,040 --> 00:09:08,390 podemos hacer es simplemente devolver esto en lugar de devolver nuestra vista con nuestro texto aquí. 105 00:09:08,420 --> 00:09:13,550 Devolveré el navegador de comidas y, dado que es un componente de reacción, simplemente puedo 106 00:09:13,550 --> 00:09:18,020 usar el código de J Isaac como este con papá si guardamos esto. 107 00:09:18,160 --> 00:09:20,890 Echamos un vistazo a nuestra aplicación a medida que 108 00:09:24,290 --> 00:09:27,040 se recarga y es posible que deba volver a cargarla manualmente. 109 00:09:27,040 --> 00:09:33,490 Debería ver la pantalla de categorías una vez que se vuelve a cargar y, por supuesto, esto es enorme porque esto 110 00:09:34,000 --> 00:09:35,360 significa que esto funciona. 111 00:09:35,440 --> 00:09:41,710 Ahora, tenga en cuenta también que, de forma predeterminada, todos obtienen un buen encabezado que tiene la plataforma 112 00:09:41,710 --> 00:09:49,180 predeterminada para buscar IO s, es limpio y plano, tiene esta delgada línea debajo para Android, es más dimensional libre porque todo 113 00:09:49,180 --> 00:09:50,720 tiene una ligera sombra. 114 00:09:50,770 --> 00:09:55,600 Ahora, por supuesto, le falta un título y aprenderá cómo podemos agregar uno en este módulo, 115 00:09:55,600 --> 00:10:01,450 pero lo sacamos de la caja y automáticamente respeta todas las muescas que pueda tener para mantenerse tan lejos que tiene 116 00:10:01,450 --> 00:10:07,060 aquí, por lo que utiliza automáticamente tal vista de área segura y eso es todo lo que mencioné en el 117 00:10:07,060 --> 00:10:12,520 último módulo del curso mientras tiene este componente y a veces lo necesita, por ejemplo, cuando crea una aplicación 118 00:10:12,520 --> 00:10:19,360 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 119 00:10:19,360 --> 00:10:24,430 del trabajo que tendría que hacer de lo contrario se asegurará de que su encabezado se vea 120 00:10:24,430 --> 00:10:29,890 bien y eso es una gran cosa porque crear manualmente un encabezado que se vea bien en todos los 121 00:10:29,890 --> 00:10:31,650 dispositivos es realmente bastante trabajo. 122 00:10:31,840 --> 00:10:33,210 Entonces eso es lo que tenemos aquí. 123 00:10:33,220 --> 00:10:36,550 La pregunta obvia ahora es cómo podemos llegar a nuestras otras pantallas.