Entonces, ¿cómo podemos asignar iconos aquí?
¿Cómo podemos asegurarnos de que usamos el color que
queremos usar?
Comencemos con el
color antes de agregar los iconos. Al igual que la función de crear navegador
de navegación de pila, crear navegador
de pestaña inferior también requiere un segundo argumento. El primer argumento es su objeto de configuración
donde configura las diferentes pestañas y las
pantallas a las que apuntan, el segundo argumento también es un objeto donde puede configurar el navegador en general y allí,
tiene un par de configuraciones.
Una vez más, los documentos oficiales son el lugar al que debes ir para aprender sobre
cada configuración aquí, una de las configuraciones más importantes aquí son las opciones de la barra de pestañas.
Este es otro objeto y, allí, puedes controlar en detalle cómo aparece la barra de pestañas, cómo está diseñada.
Puede configurar un color de tinte inactivo que es el color que tiene la pestaña que actualmente no está activo.
Puede configurar un color de tinte activo y eso es lo que realmente
necesitamos aquí, puede configurar un color de fondo activo y un color de fondo inactivo, por supuesto, también
para cambiar el fondo de las pestañas aquí si lo
desea y, por lo tanto, tiene muchas posibilidades para ajustar esto realmente a sus necesidades.
Y aquí, estableceré un color de tinte activo porque eso es
todo lo que necesito aquí, pero por supuesto, siéntase libre de jugar con eso y cambiar los colores de fondo
también y cambiar otras configuraciones y estableceré mi color de tinte activo en un valor para mis colores constantes que importo
aquí, lo estableceré en colores de color de acento.
No lo ha usado antes, pero ahora
lo usaré y ese es el color naranja que ahora tenemos, y así de fácil cambiamos el color
que tiene la pestaña activa. Ahora que es una cosa,
tenga en cuenta que, por supuesto, esto no agrega un ícono y cómo
lo haría,
no estamos diciendo nada sobre el ícono que queremos agregar. Ahora, para agregar el ícono, creo que el
patrón directo es que vaya a la configuración de su ruta aquí, así
que a la configuración donde asigna las pantallas a sus pestañas y usa el formulario más largo
donde agrega la propiedad de pantalla y donde también agrega Opciones de navegación.
Por cierto, también puede hacer esto directamente en el componente, por supuesto, agregando opciones de
navegación tal como lo hicimos antes, sin
embargo, dado que las comidas aquí en realidad son un navegador, el único lugar para
agregar opciones de
navegación es, por supuesto, aquí o también aquí, en crear navegador de pila.
Allí también puede configurar una tecla de opciones de navegación aquí en el segundo argumento, en este objeto
pasa como un segundo argumento para crear un navegador de pila donde configura el navegador general
para darle a este navegador algunas opciones de navegación debido a las opciones de navegación que asignamos a el
navegador de comidas, por lo que para el navegador de pila ahora están las opciones que tiene en cuenta
el navegador de pestañas que usa este navegador de comidas como un navegador anidado y las opciones de navegación que podemos
configurar aquí incluyen un icono de barra de pestañas. Podemos agregar el icono de la barra de pestañas aquí y el icono de la barra de pestañas en realidad es una función. No se trata de un
solo icono, sino que es una función. Es una función que recibe información de pestañas que podría decir, debería
ir aquí, ese es el argumento que obtenemos automáticamente porque esta función, por
supuesto, será llamada por React navigation y el ícono de la barra de pestañas, esta función
aquí, debe devolver el ícono que desea renderizar para esta pestaña, así que en este caso para
la pestaña de comidas.
Eso significa que necesito poder usar íconos aquí y para esto, podemos importar ionicons o cualquier otro conjunto
de íconos que desee usar desde @ expo / vector-icons.
Nuevamente, siéntase libre de instalar
este paquete, normalmente debe instalarse automáticamente cuando trabaje con Expo, pero simplemente puede ejecutar npm install
--save @ expo / vector-icons para asegurarse de que lo tiene instalado y puede usar cualquier conjunto de iconos
quieres pero siempre uso los ionicones a lo largo de este curso, me quedaré con ellos.
Con eso, puede usar ionicones como un componente como aprendió anteriormente en el curso.
Entonces, aquí solo podemos devolver ionicons como este para representar un icono de ionicon y ahora puede
usar cualquier nombre
de icono que desee aquí y aquí Quiero usar ios-restaurant,
que es simplemente un icono que encontré en la lista de iconos, esta lista
aquí que también mostré antes, aquí está este ícono
de ios-restaurante que elegí y que ahora uso, al que apunto aquí.
Este es el ícono que quiero representar,
le daré un tamaño de 25,
puedes experimentar
con eso, pero encontré que 25 se
ve bastante decente aquí en la barra de pestañas
y un color, y eso ahora es importante para tabInfo. tintColor porque el color que configuramos aquí, por supuesto, debería ser nuestro color de
tinte que configuramos aquí.
Ahora, por supuesto, podríamos codificar esto para colorear el color de
acento aquí, pero si luego lo cambiamos allí, tenemos que recordar que también lo cambiamos allí.
Lo bueno es y es por eso que esta es una función, que React navigation llama a esta
función para nosotros y nos brinda información vital sobre cómo está configurada nuestra barra de pestañas en ese objeto de información de
pestañas y que, por ejemplo, incluye el color de tinte que configuramos , para que podamos recuperar esto dinámicamente
aquí para colorear el ícono, de modo que si cambiamos el color hacia abajo para la barra de pestañas, se refleja
automáticamente en nuestros íconos,
así que es un poco de conveniencia que tengamos aquí y que podamos usar aquí .
Entonces, con eso, renderizo estos íconos para las comidas y para los favoritos, ahora podemos usar un enfoque similar, usar ese formulario más largo donde configuramos la
pantalla aquí y luego agregar opciones de navegación aquí que se fusionarán con cualquier navegación opciones que configuramos en la pantalla
de favoritos pero tenga en cuenta que, por supuesto, también puede configurar las opciones de navegación aquí en el
componente de pantalla de favoritos, por lo tanto, para mantenerlo todo en un solo
lugar, lo haré en mi configuración de navegación aquí.
Estas son mis opciones de navegación para
esta pantalla, al igual que para este navegador, el navegador de comidas, por supuesto, podemos configurar las
opciones de navegación para una pantalla, eso es
lo que hicimos en todo el módulo después de todo y allí, quiero hacer esencialmente lo mismo, así
que solo copiaré eso, lo agregaré aquí a este objeto de opciones de navegación y lo único que difiere
aquí es el ícono que quiero usar, aquí es ios-star en lugar de ios-restaurant.
Y con eso si guardamos esto, en realidad obtengo un error porque como ahora uso jsx
aquí, necesitamos importar React, por supuesto, así es como funciona React porque jsx detrás de escena se
transforma en React create element como sabes y por lo tanto ahora después de agregar la importación
React aquí en el MealsNavigator. archivo js. Esto funciona y ahora tenemos íconos que
toman automáticamente nuestro color de tinte y así de fácil puede agregar íconos.
Ahora, además de configurar el icono, es posible que también desee establecer la etiqueta y verá que, de
forma predeterminada, la etiqueta, las comidas y los favoritos es simplemente el identificador que asignamos aquí cuando configuramos nuestras comidas y favoritos
de navegación de pestañas.
Ahora, a menudo, eso tiene sentido, pero en caso de que desee tener una etiqueta diferente, entonces, en
las opciones de navegación de su pantalla, cargue aquí en
esta pestaña, puede configurar una propiedad de etiqueta de barra de pestañas y allí, eso es solo una cadena donde podría tener favoritos con un signo
de exclamación y si establece esto, verá que ahora tiene favoritos con un signo de exclamación aquí
en lugar de solo favoritos como antes.
Por lo tanto, puede anular esta etiqueta predeterminada que se supone que normalmente es su identificador, si
desea una diferente, puede anularla y, por supuesto, hay más opciones que puede establecer y
adjuntar, encontrará un enlace a los documentos oficiales para este navegador donde puede aprender todo sobre
las opciones que puede configurar en el navegador, pero también sobre las opciones de navegación de pantallas secundarias, por ejemplo, de pantallas anidadas o navegadores
anidados dentro de ese navegador de pestañas, así que lo que estamos
configurando aquí.