1 00:00:02,350 --> 00:00:05,320 Con eso, agregamos pestañas y sí, en favoritos, 2 00:00:05,330 --> 00:00:06,970 todavía no estamos haciendo 3 00:00:06,970 --> 00:00:08,370 nada, eso es 4 00:00:08,380 --> 00:00:14,070 algo que seguiremos pero al menos tenemos pestañas. Antes de trabajar en los favoritos, trabajemos un poco 5 00:00:14,070 --> 00:00:19,620 más en las pestañas porque en este momento, tenemos pestañas en Android que realmente no parecen esperar que se 6 00:00:19,620 --> 00:00:25,080 vean las pestañas de Android, esto se parece más a las pestañas de iOS si me preguntas . 7 00:00:25,080 --> 00:00:27,840 Claro que funciona y puede mantenerlo si ese es 8 00:00:27,840 --> 00:00:33,090 el estilo que desea, no tiene nada de malo, pero sería mejor tener un aspecto más específico 9 00:00:33,090 --> 00:00:39,300 de Android y, para eso, tenemos un navegador separado que podemos crear, aunque tenemos que instalar un paquete extra para 10 00:00:39,390 --> 00:00:41,180 esto primero, así que hagámoslo. 11 00:00:41,860 --> 00:00:45,660 Permítanme salir de ese servidor aquí y ejecutar npm install 12 00:00:45,660 --> 00:00:53,490 --save y ahora eso es reaccionar-navegación-material-pestañas inferiores, por cierto también hay reaccionar-navegación-material-pestañas superiores, no voy a sumergirme en eso en 13 00:00:53,490 --> 00:00:58,920 este curso aquí pero adjunto también encontrará un enlace donde puede obtener más 14 00:00:59,130 --> 00:01:04,170 información sobre ese navegador alternativo. Usaremos el navegador de pestañas inferiores 15 00:01:04,170 --> 00:01:09,130 del material aquí e instalaremos este paquete, así es como comenzamos esto. 16 00:01:09,150 --> 00:01:13,800 Esperemos a que termine la instalación y, a partir de entonces, 17 00:01:13,890 --> 00:01:25,240 instalemos otro paquete que también necesitaremos con npm install --save y que es react-native-paper. Instalemos esto también y una vez que finalice esta instalación, reiniciemos el 18 00:01:25,240 --> 00:01:26,680 servidor de 19 00:01:26,680 --> 00:01:28,720 la expo con npm 20 00:01:28,810 --> 00:01:32,400 start nuevamente porque ahora instalamos paquetes que nos 21 00:01:32,560 --> 00:01:37,940 ayudan a representar un navegador de pestañas alternativo y afortunadamente es 22 00:01:37,970 --> 00:01:43,780 muy fácil de usar y tiene casi lo mismo o muy opciones de 23 00:01:43,780 --> 00:01:48,730 configuración similares al navegador de pestañas inferior, especialmente cuando se 24 00:01:48,730 --> 00:01:54,730 trata de cómo configuramos íconos, etc. Adjunto, encontrará todos los documentos para 25 00:01:55,000 --> 00:01:56,160 este navegador 26 00:01:56,290 --> 00:02:05,080 alternativo y para ese otro navegador alternativo que mencioné y usémoslo importando desde este paquete de navegador react-navigation-material-bottom-tabs 27 00:02:05,080 --> 00:02:12,770 recién instalado aquí y desde allí podemos importar la creación función de navegador de pestaña inferior 28 00:02:12,830 --> 00:02:14,310 de material aquí. 29 00:02:14,450 --> 00:02:18,950 Ahora asegúrese de que también tenga importaciones de plataforma porque ahora necesitaremos esto porque 30 00:02:18,950 --> 00:02:21,980 solo quiero usar este navegador en lugar del navegador 31 00:02:21,980 --> 00:02:31,070 de creación de pestañas inferiores si estamos en Android. Entonces aquí podemos verificar si la plataforma. os es igual a Android y en ese 32 00:02:31,070 --> 00:02:36,830 caso, quiero usar esa nueva función de crear navegador de pestaña inferior de material que acabo de 33 00:02:36,830 --> 00:02:37,680 importar, de 34 00:02:37,740 --> 00:02:44,060 lo contrario después de los dos puntos, usaremos el navegador de pestaña inferior que configuramos en la conferencia anterior. 35 00:02:44,060 --> 00:02:50,880 Entonces, eso por supuesto nos deja con una pregunta, ¿cómo funciona el navegador de pestañas inferior del material? ¿Cómo configuramos eso? 36 00:02:50,990 --> 00:02:56,750 Y la buena noticia aquí es que, en general, funciona igual que el navegador de pestañas inferior. 37 00:02:56,750 --> 00:03:01,100 Hay algunos detalles que puede configurar en el navegador de pestañas, 38 00:03:01,100 --> 00:03:05,670 por ejemplo, qué color asumir, cuándo y qué difiere, pero con respecto 39 00:03:05,690 --> 00:03:12,210 a cómo configura sus pestañas y coincide con las pantallas y los iconos, eso es exactamente lo 40 00:03:12,350 --> 00:03:18,650 mismo y, por lo tanto, en realidad puede tomar esta configuración de pantalla completa aquí, cortarla desde 41 00:03:18,650 --> 00:03:24,350 aquí y almacenarla en una constante separada aquí, que nombraré tabScreenConfig, puede nombrarla como quiera 42 00:03:24,350 --> 00:03:25,990 porque puede reutilizarse 43 00:03:26,240 --> 00:03:33,070 y ahora usar tabScreenConfig como primer argumento en el navegador de pestañas inferiores, así como en el navegador 44 00:03:33,080 --> 00:03:40,010 de pestañas inferiores de material, así y eso solo nos deja con un segundo argumento alternativo que pasamos al 45 00:03:40,160 --> 00:03:45,290 navegador de pestañas inferior de materiales y solo al navegador de pestañas inferiores. 46 00:03:45,290 --> 00:03:51,330 Este segundo argumento que pasamos, este objeto que pasamos como segundo argumento, como aprendió, nos permite configurar el navegador de 47 00:03:51,330 --> 00:03:56,730 pestañas en sí, por ejemplo, configurar opciones de barra de pestañas como el color de tinte activo 48 00:03:56,990 --> 00:04:05,480 y eso difiere un poco porque para el navegador de pestañas inferior del material , no configuramos las opciones de la barra de pestañas para configurar nuestro color 49 00:04:05,480 --> 00:04:07,950 de tinte activo, en su lugar tenemos directamente 50 00:04:07,970 --> 00:04:14,530 un color de tinte activo aquí en este objeto, en el navegador de pestañas inferior, lo teníamos en un objeto anidado, 51 00:04:14,570 --> 00:04:17,330 en las opciones de la barra de pestañas , 52 00:04:17,330 --> 00:04:18,950 no tenemos eso aquí. 53 00:04:18,950 --> 00:04:24,590 En cambio, aquí, solo configuramos el color de tinte activo como ese para los colores de color de acento 54 00:04:24,590 --> 00:04:29,660 y también hay otras configuraciones, por ejemplo, puede configurar el cambio a verdadero y le mostraré lo 55 00:04:29,660 --> 00:04:30,800 que hace y 56 00:04:30,890 --> 00:04:39,550 lo que hace falso en un segundo y con eso, Eso es todo por ahora. Si ahora guardamos esto, reconstruiremos nuestro proyecto y lo volveremos a cargar en 57 00:04:39,550 --> 00:04:42,980 la pantalla y tenemos las mismas pestañas que antes en 58 00:04:42,980 --> 00:04:43,550 iOS, 59 00:04:43,550 --> 00:04:45,140 eso no cambió pero 60 00:04:45,140 --> 00:04:48,440 en Android, ahora tenemos ese navegador de pestañas con más 61 00:04:48,500 --> 00:04:53,200 material aquí donde podamos ahora también cambia de esta manera y ese es el 62 00:04:53,240 --> 00:04:59,270 efecto de cambio que ves aquí, que las pestañas crecen, que la etiqueta solo existe en la pestaña 63 00:04:59,270 --> 00:05:00,740 que está activa y, 64 00:05:00,860 --> 00:05:05,990 por cierto, si configuras el cambio a falso aquí, simplemente no tienes esto efecto, entonces siempre 65 00:05:05,990 --> 00:05:08,390 tienes tus etiquetas allí en Android también. 66 00:05:08,390 --> 00:05:12,490 Así que ahora diría que es un aspecto que se parece un 67 00:05:12,650 --> 00:05:19,990 poco más a Android y, por lo tanto, es un aspecto que quiero tener aquí y puedes llevar esto aún más lejos. 68 00:05:20,070 --> 00:05:23,690 Digamos que queremos cambiar el color de fondo completo de la barra 69 00:05:23,830 --> 00:05:25,150 de pestañas aquí, dependiendo 70 00:05:25,320 --> 00:05:30,800 de la pestaña que esté seleccionada, y tener un buen efecto dominó que cambie esto en el camino. 71 00:05:31,110 --> 00:05:36,360 Para esto, podemos ir a nuestra configuración de pantalla y allí a las opciones de navegación y allí, tenemos el icono 72 00:05:36,360 --> 00:05:37,780 de la barra de pestañas. 73 00:05:37,800 --> 00:05:42,760 También podemos configurar un color de la barra de pestañas aquí cuando se selecciona 74 00:05:42,810 --> 00:05:51,160 esta pestaña, por ejemplo, y, por ejemplo, configurarlo en colores primarios y ahora es importante, esto solo tiene un efecto si establece el cambio 75 00:05:51,200 --> 00:05:58,850 en verdadero, de lo contrario, esta barra de pestañas que estoy configurando aquí no tendrá ningún efecto porque solo el efecto de 76 00:05:58,850 --> 00:06:05,390 cambio lo admite y lo que ahora tendremos, el efecto que tendremos ahora es que si guardo esto, 77 00:06:06,640 --> 00:06:12,810 obtendré el mismo aspecto en iOS porque hay una barra de pestañas el color no tiene ningún 78 00:06:13,030 --> 00:06:17,770 efecto, pero ahora verá, realmente tenemos nuestro color primario como fondo si se 79 00:06:17,770 --> 00:06:21,980 seleccionan las comidas, si seleccionamos favoritos, eso cambia al otro color. 80 00:06:22,030 --> 00:06:27,940 Ahora, este cambio, por supuesto, no se ve tan hermoso y, por lo tanto, simplemente podemos cambiar eso al darle a nuestra 81 00:06:27,940 --> 00:06:30,950 pantalla de favoritos su propio color de barra de pestañas. 82 00:06:30,970 --> 00:06:36,430 Entonces, podríamos decir que en las opciones de navegación de la pantalla de favoritos al lado del ícono de la 83 00:06:36,900 --> 00:06:44,340 barra de pestañas, configuramos el color de la barra de pestañas allí para acentuar el color y ahora tendremos una barra de pestañas de colores diferentes que cambia 84 00:06:44,340 --> 00:06:51,250 de nuestro color primario para las comidas aquí para este color de acento para favoritos con este agradable efecto ondulado y, por supuesto, el inconveniente 85 00:06:51,250 --> 00:06:56,910 es que no vemos el ícono porque el color de acento para el color de la barra de pestañas no es 86 00:06:56,910 --> 00:06:57,740 una buena 87 00:06:57,750 --> 00:07:01,020 opción si nuestro color de tinte también es un color de acento. 88 00:07:01,020 --> 00:07:06,270 Entonces, si usamos este efecto, es posible que queramos usar el blanco aquí como un color de tinte que 89 00:07:06,270 --> 00:07:13,020 siempre podemos ver tanto en el color primario como en el de acento y, por lo tanto, aquí para el color de tinte activo, podríamos usar 90 00:07:13,020 --> 00:07:18,750 blanco en lugar de nuestro acento color porque el blanco funcionará para ambas pestañas, no importa si la barra de pestañas se 91 00:07:18,750 --> 00:07:24,540 colorea en el color primario, ese púrpura oscuro o en el color de acento, ese naranja y, por lo tanto, ahora verá 92 00:07:24,540 --> 00:07:26,640 que tenemos este efecto aquí y este 93 00:07:26,640 --> 00:07:32,610 agradable cambio de ondulación a la otra pestaña aquí para favoritos. Y creo que es un cambio bastante dulce y 94 00:07:32,730 --> 00:07:39,120 fácil de implementar que lo hace lucir genial en Android y ciertamente nos da un aspecto más distintivo 95 00:07:39,240 --> 00:07:45,660 similar a Android mientras mantiene el aspecto predeterminado de iOS que esperaría en esa plataforma, es realmente fácil de 96 00:07:45,660 --> 00:07:47,730 implementar como usted Puedo decir. 97 00:07:47,820 --> 00:07:52,700 Ahora una nota al margen rápida, si no desea usar este efecto de cambio 98 00:07:52,710 --> 00:07:58,020 que quiero usar aquí, pero si no desea usarlo, entonces, por supuesto, puede notar que el 99 00:07:58,020 --> 00:08:06,350 color de fondo de sus pestañas en Android es no es su color primario, sino que es un color púrpura un poco más claro, púrpura-azulado. 100 00:08:06,360 --> 00:08:09,060 Ahora, por supuesto, es posible que también desee cambiar esto, y 101 00:08:09,060 --> 00:08:12,060 como ve, el color de la barra de pestañas simplemente no tiene 102 00:08:12,060 --> 00:08:14,080 efecto, esto solo funciona con el desplazamiento. 103 00:08:14,310 --> 00:08:21,330 Ahora, si desea cambiar el color de fondo de toda la barra de pestañas en el caso sin desplazamiento, entonces todo 104 00:08:21,330 --> 00:08:29,570 lo que tiene que hacer es configurar la navegación de pestañas, ya que ahora afecta a toda la barra de pestañas, puede configurar una 105 00:08:29,570 --> 00:08:30,410 propiedad de 106 00:08:30,410 --> 00:08:36,980 estilo de barra y que simplemente es un objeto de estilo en el que, por ejemplo, puede establecer el 107 00:08:36,980 --> 00:08:43,240 color de fondo en colores primarios, de esta manera, y esto simplemente cambia el color de fondo de 108 00:08:43,240 --> 00:08:47,180 la barra de navegación para nuestra barra inferior de Android aquí. 109 00:08:47,180 --> 00:08:52,750 Así es como puedes cambiar esto si no quieres usar el patrón de cambio aquí, el 110 00:08:52,790 --> 00:08:53,860 aspecto cambiante. 111 00:08:54,080 --> 00:08:56,000 Sin embargo, volveré a activar el 112 00:08:56,010 --> 00:09:01,370 cambio, configuraremos esto nuevamente porque realmente me gusta esta barra de pestañas de diferentes colores, creo que 113 00:09:01,370 --> 00:09:07,100 es un aspecto realmente agradable con ese efecto dominó que cambia el color y así de fácil es implementar 114 00:09:07,130 --> 00:09:08,660 diferentes barras de pestañas. 115 00:09:08,660 --> 00:09:13,820 Ahora, de nuevo, hay un montón de opciones de configuración tanto para la barra de pestañas en sí como para las opciones 116 00:09:13,820 --> 00:09:18,590 de navegación de las pantallas que tiene dentro de su barra de pestañas y, por lo tanto, encontrará sus documentos 117 00:09:18,590 --> 00:09:22,490 oficiales adjuntos donde puede sumergirse en cada opción y explorar ellos y jugar con ellos.