Con eso, agregamos pestañas y sí, en favoritos,
todavía no estamos haciendo
nada, eso es
algo que seguiremos pero al menos tenemos pestañas. Antes de trabajar en los favoritos, trabajemos un poco
más en las pestañas porque en este momento, tenemos pestañas en Android que realmente no parecen esperar que se
vean las pestañas de Android, esto se parece más a las pestañas de iOS si me preguntas .
Claro que funciona y puede mantenerlo si ese es
el estilo que desea, no tiene nada de malo, pero sería mejor tener un aspecto más específico
de Android y, para eso, tenemos un navegador separado que podemos crear, aunque tenemos que instalar un paquete extra para
esto primero, así que hagámoslo.
Permítanme salir de ese servidor aquí y ejecutar npm install
--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
este curso aquí pero adjunto también encontrará un enlace donde puede obtener más
información sobre ese navegador alternativo. Usaremos el navegador de pestañas inferiores
del material aquí e instalaremos este paquete, así es como comenzamos esto.
Esperemos a que termine la instalación y, a partir de entonces,
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
servidor de
la expo con npm
start nuevamente porque ahora instalamos paquetes que nos
ayudan a representar un navegador de pestañas alternativo y afortunadamente es
muy fácil de usar y tiene casi lo mismo o muy opciones de
configuración similares al navegador de pestañas inferior, especialmente cuando se
trata de cómo configuramos íconos, etc. Adjunto, encontrará todos los documentos para
este navegador
alternativo y para ese otro navegador alternativo que mencioné y usémoslo importando desde este paquete de navegador react-navigation-material-bottom-tabs
recién instalado aquí y desde allí podemos importar la creación función de navegador de pestaña inferior
de material aquí.
Ahora asegúrese de que también tenga importaciones de plataforma porque ahora necesitaremos esto porque
solo quiero usar este navegador en lugar del navegador
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
caso, quiero usar esa nueva función de crear navegador de pestaña inferior de material que acabo de
importar, de
lo contrario después de los dos puntos, usaremos el navegador de pestaña inferior que configuramos en la conferencia anterior.
Entonces, eso por supuesto nos deja con una pregunta, ¿cómo funciona el navegador de pestañas inferior del material? ¿Cómo configuramos eso?
Y la buena noticia aquí es que, en general, funciona igual que el navegador de pestañas inferior.
Hay algunos detalles que puede configurar en el navegador de pestañas,
por ejemplo, qué color asumir, cuándo y qué difiere, pero con respecto
a cómo configura sus pestañas y coincide con las pantallas y los iconos, eso es exactamente lo
mismo y, por lo tanto, en realidad puede tomar esta configuración de pantalla completa aquí, cortarla desde
aquí y almacenarla en una constante separada aquí, que nombraré tabScreenConfig, puede nombrarla como quiera
porque puede reutilizarse
y ahora usar tabScreenConfig como primer argumento en el navegador de pestañas inferiores, así como en el navegador
de pestañas inferiores de material, así y eso solo nos deja con un segundo argumento alternativo que pasamos al
navegador de pestañas inferior de materiales y solo al navegador de pestañas inferiores.
Este segundo argumento que pasamos, este objeto que pasamos como segundo argumento, como aprendió, nos permite configurar el navegador de
pestañas en sí, por ejemplo, configurar opciones de barra de pestañas como el color de tinte activo
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
de tinte activo, en su lugar tenemos directamente
un color de tinte activo aquí en este objeto, en el navegador de pestañas inferior, lo teníamos en un objeto anidado,
en las opciones de la barra de pestañas ,
no tenemos eso aquí.
En cambio, aquí, solo configuramos el color de tinte activo como ese para los colores de color de acento
y también hay otras configuraciones, por ejemplo, puede configurar el cambio a verdadero y le mostraré lo
que hace y
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
la pantalla y tenemos las mismas pestañas que antes en
iOS,
eso no cambió pero
en Android, ahora tenemos ese navegador de pestañas con más
material aquí donde podamos ahora también cambia de esta manera y ese es el
efecto de cambio que ves aquí, que las pestañas crecen, que la etiqueta solo existe en la pestaña
que está activa y,
por cierto, si configuras el cambio a falso aquí, simplemente no tienes esto efecto, entonces siempre
tienes tus etiquetas allí en Android también.
Así que ahora diría que es un aspecto que se parece un
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.
Digamos que queremos cambiar el color de fondo completo de la barra
de pestañas aquí, dependiendo
de la pestaña que esté seleccionada, y tener un buen efecto dominó que cambie esto en el camino.
Para esto, podemos ir a nuestra configuración de pantalla y allí a las opciones de navegación y allí, tenemos el icono
de la barra de pestañas.
También podemos configurar un color de la barra de pestañas aquí cuando se selecciona
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
en verdadero, de lo contrario, esta barra de pestañas que estoy configurando aquí no tendrá ningún efecto porque solo el efecto de
cambio lo admite y lo que ahora tendremos, el efecto que tendremos ahora es que si guardo esto,
obtendré el mismo aspecto en iOS porque hay una barra de pestañas el color no tiene ningún
efecto, pero ahora verá, realmente tenemos nuestro color primario como fondo si se
seleccionan las comidas, si seleccionamos favoritos, eso cambia al otro color.
Ahora, este cambio, por supuesto, no se ve tan hermoso y, por lo tanto, simplemente podemos cambiar eso al darle a nuestra
pantalla de favoritos su propio color de barra de pestañas.
Entonces, podríamos decir que en las opciones de navegación de la pantalla de favoritos al lado del ícono de la
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
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
es que no vemos el ícono porque el color de acento para el color de la barra de pestañas no es
una buena
opción si nuestro color de tinte también es un color de acento.
Entonces, si usamos este efecto, es posible que queramos usar el blanco aquí como un color de tinte que
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
blanco en lugar de nuestro acento color porque el blanco funcionará para ambas pestañas, no importa si la barra de pestañas se
colorea en el color primario, ese púrpura oscuro o en el color de acento, ese naranja y, por lo tanto, ahora verá
que tenemos este efecto aquí y este
agradable cambio de ondulación a la otra pestaña aquí para favoritos. Y creo que es un cambio bastante dulce y
fácil de implementar que lo hace lucir genial en Android y ciertamente nos da un aspecto más distintivo
similar a Android mientras mantiene el aspecto predeterminado de iOS que esperaría en esa plataforma, es realmente fácil de
implementar como usted Puedo decir.
Ahora una nota al margen rápida, si no desea usar este efecto de cambio
que quiero usar aquí, pero si no desea usarlo, entonces, por supuesto, puede notar que el
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.
Ahora, por supuesto, es posible que también desee cambiar esto, y
como ve, el color de la barra de pestañas simplemente no tiene
efecto, esto solo funciona con el desplazamiento.
Ahora, si desea cambiar el color de fondo de toda la barra de pestañas en el caso sin desplazamiento, entonces todo
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
propiedad de
estilo de barra y que simplemente es un objeto de estilo en el que, por ejemplo, puede establecer el
color de fondo en colores primarios, de esta manera, y esto simplemente cambia el color de fondo de
la barra de navegación para nuestra barra inferior de Android aquí.
Así es como puedes cambiar esto si no quieres usar el patrón de cambio aquí, el
aspecto cambiante.
Sin embargo, volveré a activar el
cambio, configuraremos esto nuevamente porque realmente me gusta esta barra de pestañas de diferentes colores, creo que
es un aspecto realmente agradable con ese efecto dominó que cambia el color y así de fácil es implementar
diferentes barras de pestañas.
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
de navegación de las pantallas que tiene dentro de su barra de pestañas y, por lo tanto, encontrará sus documentos
oficiales adjuntos donde puede sumergirse en cada opción y explorar ellos y jugar con ellos.