1 00:00:02,940 --> 00:00:09,450 Así que agreguemos este último patrón de navegación principal que ves en las aplicaciones móviles y que tiene una puerta lateral, por 2 00:00:10,170 --> 00:00:16,000 supuesto, la navegación de riesgo está cubierta para papá, así como la navegación de reacción que puedes importar, crear, dibujar 3 00:00:16,000 --> 00:00:18,740 y Navigator, que hace exactamente lo que parece. 4 00:00:18,750 --> 00:00:24,690 Nos facilita la creación de este patrón de navegación basado en sorteos y nos brinda un sorteo así 5 00:00:24,750 --> 00:00:30,870 y toda la funcionalidad que necesitamos para controlar la paja de la caja, lo que por supuesto es muy conveniente. 6 00:00:30,930 --> 00:00:35,060 Así que simplemente creamos un nuevo navegador y lo haré al final de este archivo. 7 00:00:35,490 --> 00:00:40,860 Y solo una nota al margen rápida, por supuesto, podría dividir eso en varios archivos y 8 00:00:40,890 --> 00:00:46,550 tener cada navegador en su propio archivo y luego combinarlos en un archivo importándolos en un archivo central. 9 00:00:46,560 --> 00:00:48,120 Eso es algo que podrías hacer. 10 00:00:48,120 --> 00:00:51,430 Me resultó más fácil para este tutorial también mantenerlo todo en un solo archivo. 11 00:00:51,560 --> 00:00:56,070 Un archivo demasiado grande pero demasiado grande, pero definitivamente puedes dividirlo. 12 00:00:56,340 --> 00:01:01,410 Así que crearé mi navegador de dibujo aquí en la parte inferior de este archivo y todo almacenado en esa constante llamada 13 00:01:01,770 --> 00:01:04,380 Navegador principal porque al final eso es lo que es. 14 00:01:04,380 --> 00:01:10,470 Este será nuestro navegador principal al final porque la pestaña estará dentro del sorteo y el navegador al 15 00:01:10,470 --> 00:01:11,880 final nuestros haps aquí. 16 00:01:11,970 --> 00:01:13,190 Entonces en ambas pestañas. 17 00:01:13,200 --> 00:01:19,530 Tenemos acceso a ese sorteo lateral y decidimos que el sorteo nos permite ir a una pantalla completamente nueva que no formará 18 00:01:19,530 --> 00:01:20,880 parte de nuestros toques. 19 00:01:20,910 --> 00:01:25,890 Por lo tanto, el navegador de dibujo está por encima del navegador de pestañas en la jerarquía. 20 00:01:26,130 --> 00:01:28,680 Entonces, ¿cómo configuramos un navegador de dibujo? 21 00:01:28,830 --> 00:01:32,070 Básicamente, tal como lo hicimos antes, se necesitan dos argumentos. 22 00:01:32,070 --> 00:01:37,950 El primer argumento es un objeto en el que configuramos las pantallas para la justicia del 23 00:01:37,950 --> 00:01:46,350 navegador destructor antes de tener identificadores como grifos o favoritos de comidas, sea cual sea el navegador apropiado para esa primera entrada del cajón 24 00:01:46,350 --> 00:01:47,570 que desea tener. 25 00:01:47,850 --> 00:01:54,780 Y aquí quiero señalar mi navegador de pestañas padre de comidas todavía porque eso es lo que quiero cargar allí 26 00:01:54,780 --> 00:02:02,460 y en una segunda entrada está la pantalla de filtros, no debemos olvidar que tenemos otra pantalla que es la pantalla de filtros 27 00:02:02,460 --> 00:02:08,550 que no hemos usado antes, ya que es hora de brillar y, de hecho, todo envuelto en 28 00:02:08,550 --> 00:02:11,130 un navegador de pila, aunque esté vacío. 29 00:02:11,130 --> 00:02:13,850 Entonces también obtuvimos un encabezado allí. 30 00:02:14,130 --> 00:02:20,370 Entonces agregaré otro navegador de pila aquí con create stack navigator. 31 00:02:20,370 --> 00:02:22,130 Esa es una pila muy simple. 32 00:02:22,290 --> 00:02:26,670 Solo tendrá una pantalla y esa será la pantalla de filtros que, por lo tanto, necesitaría importar aquí 33 00:02:26,670 --> 00:02:29,190 en la parte superior porque todavía no lo estamos haciendo. 34 00:02:29,340 --> 00:02:38,670 Importemos la pantalla de filtros aquí desde la pantalla de filtros de pantalla y ahora podemos usar la pantalla de filtros en su 35 00:02:38,720 --> 00:02:47,600 sitio web, no aquí, sino aquí en el navegador de pila y se llama así el navegador de filtros. mi navegador de 36 00:02:47,600 --> 00:02:54,450 cajones y yo solo utilizamos un navegador de pila aquí, por lo que también tienen un encabezado 37 00:02:54,450 --> 00:02:59,790 allí y, por ninguna otra razón, ahora en la pantalla del filtro, por 38 00:02:59,790 --> 00:03:04,260 supuesto, trabajaré en esto en un segundo, pero allí hay 39 00:03:04,260 --> 00:03:12,810 una cosa que quiero hacer de inmediato. agregaré mis opciones de navegación y agregaré un título de encabezado allí y lo 40 00:03:15,280 --> 00:03:24,840 configuraré para filtrar o filtrar comidas por el estilo con eso de vuelta al navegador de comidas que estamos creando esa pila estamos asignando 41 00:03:24,840 --> 00:03:31,050 el navegador de filtros navegador de pila a nuestro navegador de dibujo y ahora solo 42 00:03:31,050 --> 00:03:40,270 tenemos que usar el navegador principal aquí en nuestro contenedor de aplicaciones para comenzar con la deuda y ahora, si guardamos esto, no 43 00:03:40,270 --> 00:03:41,350 vemos nada. 44 00:03:41,350 --> 00:03:47,380 Bien, dije que el navegador de sorteos manejaría toda la lógica para abrirlo y termina 45 00:03:47,380 --> 00:03:56,020 en lo que no hace automáticamente para nosotros: mostrar un ícono de menú para que no muestre un botón de hamburguesa para nosotros. 46 00:03:56,020 --> 00:03:59,710 Eso es algo que tenemos que hacer y podemos decidir qué pantallas mostrar. 47 00:03:59,710 --> 00:04:04,600 Y, por supuesto, esa sería la pantalla de categoría porque esa es la pantalla raíz de la pestaña 48 00:04:04,600 --> 00:04:09,320 de comidas y la pantalla favorita porque esa es la pantalla raíz de su pestaña de favoritos. 49 00:04:09,340 --> 00:04:15,880 Entonces, en estas dos pantallas, quiero agregar ese ícono de menú y lo agrego en mis opciones de navegación 50 00:04:15,910 --> 00:04:20,390 como aprendiste porque allí quiero agregarlo con la ayuda del encabezado izquierdo. 51 00:04:20,410 --> 00:04:26,620 Anteriormente, teníamos derecho a agregar acciones a la barra de navegación en el encabezado, pero ese botón de menú generalmente se 52 00:04:26,620 --> 00:04:29,070 encuentra a la izquierda para agregarlo aquí. 53 00:04:29,350 --> 00:04:32,810 Y usaré mis botones de encabezado para esto. 54 00:04:32,920 --> 00:04:37,480 Entonces importaremos desde los botones de encabezado de navegación de reacción. 55 00:04:37,480 --> 00:04:44,970 Este paquete que usamos anteriormente a partir de ahí importaré botones de encabezado y también detallaré lo que todos usamos antes y 56 00:04:47,490 --> 00:04:50,280 también importaré mi botón de encabezado personalizado. 57 00:04:50,280 --> 00:04:57,660 Entonces, el botón de encabezado del botón de encabezado de componentes tiene el mismo patrón que usamos antes para agregar esa estrella. 58 00:04:57,690 --> 00:04:59,730 De hecho, puedo barra de acción. 59 00:04:59,730 --> 00:05:06,330 Ahora lo haré aquí para el ícono de menú para el botón de menú y, por lo 60 00:05:06,360 --> 00:05:18,000 tanto, ahora podemos ir a la izquierda y sus botones de encabezado de anuncio este año como un componente, establezca el componente de botón de encabezado en nuestro componente de botón de 61 00:05:18,000 --> 00:05:18,500 encabezado. 62 00:05:18,510 --> 00:05:23,610 Estamos importando desde nuestro propio componente personalizado y agregamos un elemento allí que nos permite definir 63 00:05:23,610 --> 00:05:28,420 el título que debería ser menú y, lo que es más importante, puedo nombrarlo. 64 00:05:28,560 --> 00:05:31,560 Y allí puedes usar el menú IOW. 65 00:05:31,560 --> 00:05:36,570 Y, por cierto, siempre puede usar la plataforma API aquí para usar un icono diferente para Android 66 00:05:36,570 --> 00:05:38,640 y para ISIS si lo desea. 67 00:05:38,640 --> 00:05:44,910 Y por último, pero no menos importante, todo el complemento de la prensa para hacer algo cuando se presionan los botones muertos. 68 00:05:44,910 --> 00:05:52,200 Y ahora esto debería mostrar un bonito botón de menú aquí en esa pantalla y, de hecho, lo vemos aquí 69 00:05:52,830 --> 00:05:53,600 en nosotros. 70 00:05:53,640 --> 00:05:55,730 Y también lo vemos en Android. 71 00:05:55,740 --> 00:06:00,040 Ahora, nuevamente, si desea un ícono diferente en Android que se parezca más a los íconos típicos de Android. 72 00:06:00,090 --> 00:06:05,550 Lo mismo es cierto para los toques por la forma en que puede usar la API de la plataforma para representar un 73 00:06:06,350 --> 00:06:09,680 ícono diferente allí y ahorrar algo de tiempo. Usaré los mismos íconos. 74 00:06:09,720 --> 00:06:11,910 Así es como mostramos el ícono. 75 00:06:11,910 --> 00:06:18,360 ¿Cómo abrimos un sorteo? Sin embargo, para esto necesitamos acceso al accesorio de navegación y no tenemos ese 76 00:06:18,360 --> 00:06:21,420 acceso en las opciones de navegación como esta. 77 00:06:21,420 --> 00:06:27,330 Pero, por supuesto, aprendimos anteriormente que puede usar el formulario de función aquí donde luego obtiene sus datos de 78 00:06:27,330 --> 00:06:27,680 navegación. 79 00:06:27,690 --> 00:06:33,180 Podrías decir que en esa función debes devolver tu objeto de configuración. 80 00:06:33,180 --> 00:06:36,720 Entonces aquí tienes que devolver un objeto al final. 81 00:06:36,930 --> 00:06:40,170 Y ahora los datos de navegación tienen ese accesorio de navegación. 82 00:06:40,170 --> 00:06:46,380 Así que ahora aquí, en la prensa, podemos decir que los datos de navegación, navegación de puntos, papá ahora estarán disponibles, 83 00:06:46,380 --> 00:06:50,350 proporcionados por la navegación de reacción que ejecuta esta función al final. 84 00:06:50,550 --> 00:06:54,030 Y allí tendrá un método de alternar dibujar. 85 00:06:54,030 --> 00:06:59,850 También tendría un dibujo abierto si sabe que solo desea abrirlo, pero el dibujo de alternancia lo abrirá si está 86 00:06:59,850 --> 00:07:01,890 cerrado y lo cerrará si está abierto. 87 00:07:01,890 --> 00:07:06,440 Entonces, aquí tiene que alternar el dibujo y el guión debe abrir el menú lateral. 88 00:07:06,440 --> 00:07:12,570 Entonces, si guardamos eso ahora, de hecho, el cajón se abre, podemos trabajar en el estilo y el 89 00:07:12,570 --> 00:07:20,890 texto que vemos aquí en un segundo, pero así es como puede abrir ese cajón ahora antes de que nos preocupemos por cómo se ve aquí. 90 00:07:20,930 --> 00:07:22,690 Asegurémonos de tener que decir uno de los favoritos. 91 00:07:22,700 --> 00:07:27,050 Y, por supuesto, todos pueden depositar un video y hacerlo por su cuenta aquí porque los pasos serán 92 00:07:27,050 --> 00:07:29,570 los mismos que para las categorías de comidas aquí. 93 00:07:29,570 --> 00:07:34,430 Es una buena práctica ofrecer, pero después de esta breve pausa, tienes que pasar este video, 94 00:07:36,210 --> 00:07:38,520 lo haremos juntos para que tengas éxito. 95 00:07:38,520 --> 00:07:46,400 Hagámoslo juntos y al final todo se trata de copiar esta configuración aquí Pantalla de favoritos 2D, así que copiaré toda esta configuración de 96 00:07:47,060 --> 00:07:53,210 opciones de navegación desde la pantalla de categorías a la pantalla favorita y reemplazaré mi opción de navegación, 97 00:07:53,660 --> 00:07:58,760 por supuesto, eso significa que yo tengo que renombrarnos aquí a la pantalla de 98 00:07:58,760 --> 00:08:05,450 favoritos y aquí cambiar el título de nuevo a tus favoritos, pero ahora ya tengo esta función de creación de 99 00:08:05,450 --> 00:08:12,130 opciones de navegación dinámica aquí donde tengo que alternar dibujar llamar aquí al icono I cuando usa el mismo, solo 100 00:08:12,170 --> 00:08:17,720 tenemos que hacer seguro que importamos todas las cosas que necesitamos importar y para papá podemos 101 00:08:17,720 --> 00:08:25,100 obtener las importaciones aquí desde la pantalla de categorías, así como desde el paquete de botones o botones de navegación de reacción. 102 00:08:25,100 --> 00:08:27,020 Y desde nuestro propio botón de encabezado. 103 00:08:27,020 --> 00:08:34,920 Tome eso y agregue aquí en la pantalla favorita ahora con papá si guardamos, ya que esto debería estar todo ahora en la pantalla 104 00:08:34,930 --> 00:08:41,100 favorita, también tenemos que dibujar y puede abrirlo allí también, no podemos abrirlo solo si hacemos clic en la 105 00:08:41,120 --> 00:08:46,180 función de filtros para llevar a la pantalla de filtro allí en este momento simplemente 106 00:08:46,180 --> 00:08:52,160 no tenemos un camino de regreso, pero eso es realmente algo que todos podemos solucionar de inmediato debido 107 00:08:52,220 --> 00:09:02,560 a la pantalla de filtro, simplemente también quiero tener un dibujo en la parte superior, así que en el pantalla de filtro También agregaré mis importaciones aquí Los botones de encabezado 108 00:09:02,680 --> 00:09:07,280 de Whip terminan y luego todas las opciones de agregar por navegación aquí. 109 00:09:07,570 --> 00:09:13,780 Copie las opciones de navegación de la pantalla favorita, esta función dinámica y agréguela a la pantalla de 110 00:09:13,840 --> 00:09:19,900 filtros y reemplace la escalera de opciones de navegación, por lo tanto, cambie este año nuevamente a 111 00:09:19,960 --> 00:09:27,730 la pantalla de filtros y cambie al título para filtrar comidas o lo que quiera aquí y con eso también deberíamos tener un 112 00:09:27,940 --> 00:09:34,600 dibujo en la pantalla del filtro y eso nos permite volver a nuestras comidas ahora, aunque faltan un par 113 00:09:34,600 --> 00:09:35,580 de cosas. 114 00:09:35,620 --> 00:09:40,870 Por ejemplo, en la pantalla del filtro, el encabezado se ve totalmente diferente y, por lo 115 00:09:40,870 --> 00:09:46,930 tanto, aquí en Android ni siquiera puedo ver mi botón porque es blanco, el texto aquí no es el 116 00:09:46,930 --> 00:09:55,570 texto que quiero mostrar También quiero usar diferentes colores aquí, tal vez una fuente diferente, así que queda trabajo por hacer, pero se agregó la funcionalidad 117 00:09:55,720 --> 00:09:59,820 básica de dibujo y, como puede ver, con muy poco esfuerzo. 118 00:09:59,890 --> 00:10:03,550 Así que ahora cuidemos el estilo del dibujo y la pantalla de filtros.