1 00:00:02,280 --> 00:00:05,200 Comencemos por diseñar el cajón en la pantalla de 2 00:00:05,220 --> 00:00:06,560 filtros, eso no 3 00:00:06,570 --> 00:00:11,080 es difícil, es algo que hicimos antes. En el navegador de filtros aquí 4 00:00:11,100 --> 00:00:16,500 en el navegador de pila, al final solo tenemos que configurar las opciones de navegación predeterminadas que 5 00:00:16,500 --> 00:00:24,090 también estamos usando para el navegador favorito en nuestro navegador de comidas. Entonces, podemos copiar este segundo objeto de configuración aquí y agregar 6 00:00:24,090 --> 00:00:29,270 esto en nuestro navegador de filtros aquí como un segundo argumento para crear un navegador de pila. 7 00:00:29,350 --> 00:00:31,870 Por supuesto, podemos eliminar esa línea comentada, 8 00:00:31,870 --> 00:00:39,220 pero con este simple cambio, nos estamos asegurando de usar aquí la misma barra de navegación o estilo de barra 9 00:00:39,220 --> 00:00:40,450 de acción. 10 00:00:40,450 --> 00:00:45,580 Entonces, ese es un cambio simple pero útil, ahora para el cajón en sí, ¿qué pasa 11 00:00:45,580 --> 00:00:48,770 con este aspecto aquí y el estilo del cajón? 12 00:00:48,780 --> 00:00:55,690 Ahora, por un lado, puede si desea controlar todo el cajón y cambiar la forma en que se colocan los elementos allí, y no usar 13 00:00:55,990 --> 00:01:01,120 este valor predeterminado de tener una lista con efecto dominó aquí en Android y un efecto diferente en 14 00:01:01,120 --> 00:01:01,910 iOS, pero 15 00:01:02,050 --> 00:01:05,680 creo que es un buen valor predeterminado que en realidad no quiero cambiar. 16 00:01:05,710 --> 00:01:10,930 Si lo desea, sin embargo, puede reemplazar todo este componente que se muestra aquí y adjunto, encontrará un 17 00:01:10,930 --> 00:01:15,850 enlace a los documentos oficiales donde puede obtener más información sobre esto en caso de que 18 00:01:15,850 --> 00:01:16,510 necesite personalizarlo. 19 00:01:16,780 --> 00:01:25,050 Lo que, por supuesto, quiero cambiar es el estilo de estos elementos y el texto que se muestra aquí. 20 00:01:25,060 --> 00:01:26,550 Ahora que no 21 00:01:26,590 --> 00:01:32,500 es demasiado difícil, comencemos con el texto. Como texto, como puede ver, por defecto toma estos 22 00:01:32,530 --> 00:01:34,550 identificadores aquí, filtros favoritos de comidas. 23 00:01:34,570 --> 00:01:39,020 Ahora, por supuesto, puede hacer eso, pero las comidas favoritas, ese no es 24 00:01:39,040 --> 00:01:42,250 realmente un texto que queremos mostrar a nuestros usuarios. 25 00:01:42,250 --> 00:01:47,540 Por lo tanto, quiero anular esto y podemos hacerlo con las buenas opciones de navegación antiguas que, al 26 00:01:47,560 --> 00:01:53,920 igual que antes con las pestañas donde también podríamos controlar el texto de la etiqueta, tenemos que configurar en nuestros navegadores 27 00:01:54,160 --> 00:02:00,460 de pila, ya sea cuando estamos creando el apile el navegador, además de configurar las opciones de navegación predeterminadas para cada 28 00:02:00,460 --> 00:02:05,690 pantalla en ese navegador, podemos configurar las opciones de navegación para todo el navegador, que no es 29 00:02:05,700 --> 00:02:10,510 para las pantallas en el navegador sino para el navegador cuando se usa como una pantalla, 30 00:02:10,510 --> 00:02:11,500 que es 31 00:02:11,740 --> 00:02:19,570 lo que estamos haciendo aquí y luego aquí podríamos establecer una etiqueta de cajón y podríamos configurar esto para filtros con un par de signos de 32 00:02:19,570 --> 00:02:22,100 exclamación solo para que veamos que esto tiene 33 00:02:22,150 --> 00:02:23,720 un efecto, ahora vemos que 34 00:02:23,770 --> 00:02:27,220 aquí, así que ahí es donde podemos configurar esto, una opción. 35 00:02:27,220 --> 00:02:32,800 Alternativamente, al crear el navegador de cajones, podemos usar ese formulario más largo donde configuramos una 36 00:02:32,800 --> 00:02:38,260 pantalla y donde configuramos las opciones de navegación aquí y estas son simplemente alternativas donde 37 00:02:38,590 --> 00:02:40,230 ninguno de los dos es 38 00:02:40,240 --> 00:02:41,830 mejor o peor, 39 00:02:41,980 --> 00:02:47,840 puede usar cualquiera de ellos y ahora aquí, pondré la etiqueta del cajón a las comidas, 40 00:02:47,840 --> 00:02:52,760 digamos, eso tiene más sentido para mí que los favoritos de las comidas. 41 00:02:53,600 --> 00:02:58,670 Entonces con eso si ahora abro el cajón, veo comidas y filtros. Para los filtros, ahora no anulé el título 42 00:02:58,670 --> 00:03:02,100 porque estoy de acuerdo con el valor predeterminado de tomar mi 43 00:03:02,240 --> 00:03:04,580 identificador, pero para las comidas, lo anulé. 44 00:03:04,580 --> 00:03:08,420 ¿Qué pasa con el estilo, el color, etc.? 45 00:03:08,420 --> 00:03:15,020 Bueno, eso por supuesto puede ser controlado también. Bueno, al igual que antes con, por ejemplo, las pestañas donde 46 00:03:15,020 --> 00:03:21,260 también podríamos pasar un segundo argumento para crear un navegador de pestañas inferior para controlar el diseño y el estilo 47 00:03:21,260 --> 00:03:22,130 de las 48 00:03:22,130 --> 00:03:28,190 pestañas en general, podemos hacer lo mismo para el cajón. Para crear el navegador de cajones, podemos pasar un segundo argumento, 49 00:03:28,220 --> 00:03:31,320 que es un objeto configurado para el navegador de cajones, y allí 50 00:03:31,550 --> 00:03:33,290 tenemos un par de opciones. 51 00:03:33,320 --> 00:03:37,880 Una vez más, los documentos oficiales le dan una lista exhaustiva de todo lo que 52 00:03:37,880 --> 00:03:42,980 puede configurar, por ejemplo, tiene sus opciones de contenido que le permiten controlar el contenido en el cajón, 53 00:03:42,980 --> 00:03:47,730 por lo que los elementos del cajón hasta el final, tiene un montón de configuraciones que puede 54 00:03:47,930 --> 00:03:53,960 configurar, por ejemplo, puede configurar un color de tinte activo que básicamente es el color que tiene un elemento cuando está activo 55 00:03:54,090 --> 00:03:59,870 y allí, podemos configurarlo en colores, color de acento si lo deseamos, en lugar de usar ese azul predeterminado y 56 00:03:59,870 --> 00:04:00,320 ahora, 57 00:04:00,320 --> 00:04:05,170 esto es naranja y así de fácil es cambiar esto, esto es todo lo que necesitamos hacer. 58 00:04:05,330 --> 00:04:08,980 Ahora, si también queremos cambiar la fuente que 59 00:04:09,080 --> 00:04:15,710 se usa allí, también podemos hacerlo. Además de establecer un color de tinte activo aquí en las 60 00:04:15,710 --> 00:04:17,120 opciones de contenido, podemos 61 00:04:17,120 --> 00:04:22,010 configurar un estilo de etiqueta aquí y que tome un objeto de estilo que se aplicará al 62 00:04:22,010 --> 00:04:24,810 componente de texto subyacente en el cajón, para que podamos 63 00:04:24,950 --> 00:04:32,870 configurar cosas como texto alinear allí si queremos o en mi caso aquí, simplemente configure la familia de fuentes y configure esto para abrir sans, tal vez así, 64 00:04:32,870 --> 00:04:36,550 ni siquiera la versión en negrita. Si hacemos eso, vemos claramente una diferencia. 65 00:04:36,550 --> 00:04:40,790 Ahora lo volveré a poner en negrita porque es mejor, pero para ver la diferencia, 66 00:04:40,880 --> 00:04:42,890 creo que estaba claro sin negrita. 67 00:04:42,920 --> 00:04:44,950 Así que ahora, estamos usando nuestra 68 00:04:44,960 --> 00:04:47,570 propia fuente aquí, la versión en negrita 69 00:04:47,570 --> 00:04:48,530 y nuestro 70 00:04:48,530 --> 00:04:54,130 propio color y eso es bastante bueno, diría, lo mismo, por supuesto, también funciona en Android. 71 00:04:54,170 --> 00:04:58,460 Así es como puede trabajar con su cajón, cómo también puede diseñar 72 00:04:58,460 --> 00:05:01,700 todo lo que está allí y, con eso, 73 00:05:01,940 --> 00:05:07,850 aprendió sobre los principales patrones de navegación que puede agregar a su aplicación con la ayuda 74 00:05:07,850 --> 00:05:09,270 de React navigation. 75 00:05:09,290 --> 00:05:15,770 Ahora, obviamente, como enfaticé varias veces a lo largo de este módulo, hay mucho que configurar, todos estos navegadores 76 00:05:15,770 --> 00:05:20,990 tienen diferentes opciones y configuraciones de navegación para los propios navegadores y, por lo tanto, 77 00:05:20,990 --> 00:05:26,060 definitivamente revisen los documentos oficiales y simplemente jueguen con las diferentes configuraciones que ven allí 78 00:05:26,060 --> 00:05:31,820 para experimenta con lo que puedes hacer. Las cosas que mostré aquí y las cosas que cambiamos aquí 79 00:05:31,820 --> 00:05:35,000 son probablemente las cosas comunes que desea personalizar, por eso las mostré 80 00:05:35,090 --> 00:05:36,580 aquí, pero de nuevo hay 81 00:05:36,590 --> 00:05:40,950 mucho que hacer, definitivamente revise los documentos oficiales. Para esta aplicación, la parte 82 00:05:40,970 --> 00:05:43,960 de navegación se realiza básicamente, no hay mucho más 83 00:05:43,970 --> 00:05:46,410 que agregar, ahora es el momento de 84 00:05:46,430 --> 00:05:50,360 volver a visitar el estilo general, por ejemplo, asegúrese de estar usando 85 00:05:50,360 --> 00:05:56,600 las fuentes correctas en todas partes, también en las pestañas y en el encabezado y para ejemplo también para 86 00:05:56,660 --> 00:06:00,590 el texto aquí que actualmente no estamos y luego también llena el 87 00:06:00,590 --> 00:06:06,050 resto de la aplicación con algo de carne. Por ejemplo, la página de detalles aquí que todavía 88 00:06:06,050 --> 00:06:11,810 tiene algo de contenido ficticio en este momento y también nuestra página de filtros que también solo tiene contenido ficticio. 89 00:06:11,810 --> 00:06:14,290 Eso es lo que haré en el resto 90 00:06:14,330 --> 00:06:20,330 de este módulo, a partir de entonces en el próximo módulo, también nos aseguraremos de agregar más lógica y de que, por 91 00:06:20,330 --> 00:06:25,700 ejemplo, podamos marcar algo como favorito y, por lo tanto, agregarlo a los favoritos. pestaña que actualmente no funciona. 92 00:06:25,910 --> 00:06:30,470 Pero por ahora, terminemos el estilo y agreguemos el resto del diseño y el contenido a esta aplicación.