Así que quiero comenzar con algunos ajustes de fuente en mis pestañas aquí, en el encabezado y también en
el texto aquí en todas mis recetas. Quiero asegurarme de que en todas partes, estoy usando la fuente correcta,
mis propias fuentes personalizadas y especialmente aquí, en el encabezado, en las pestañas, todavía no estamos asegurando esto.
Por supuesto, es relativamente fácil
asegurarse de eso y comencemos con el encabezado. El encabezado generalmente tiene un estilo, como el color de fondo, con nuestras
opciones de navegación predeterminadas que siempre configuramos en el navegador de
pila a la derecha, las opciones de navegación predeterminadas aquí nos permiten diseñar el encabezado y, por ejemplo, darle al encabezado un
estilo general y Añadir un color de fondo.
Ahora es importante reconocer aquí que el estilo de encabezado realmente solo se dirige al cuadro, el fondo, por así decirlo,
por lo que el contenedor en el que se encuentran los elementos de acción, el botón de retroceso y este título, el título en sí
mismo no puede orientarse con estilo de
encabezado, pero Por supuesto, tenemos una alternativa a eso. Además del estilo de encabezado donde podemos diseñar ese
contenedor de encabezado, también tenemos un estilo de título de encabezado y que, como era de esperar, apunta al componente de
texto en el que se presenta nuestro título de encabezado y allí podemos diseñarlo como podemos diseñar elementos de texto en React
Native, por ejemplo Al agregar una familia de fuentes de sans abierto, nuevamente
uso la versión sin negrita para que podamos ver rápidamente la diferencia.
Esto claramente ya no está en negrita, supongo, es bastante claro de ver, especialmente aquí en iOS y ahora si
configuro esto en negrita, me aseguro de usar este estilo correcto
tanto en iOS como en Android. Ahora, por cierto, para el texto posterior aquí, también podemos
anular ese valor predeterminado, que es la fuente predeterminada del sistema al configurar el estilo del título posterior del encabezado, esa
es
una configuración separada que podemos configurar aquí y allá, también podemos configurar la familia de fuentes
para digamos open sans, no la
versión en negrita, no quiero tener eso en negrita pero quiero tenerlo en mi propia fuente y ahora debería
ser open sans aquí y usar mi propia fuente. En Android, por supuesto, esto no tiene ningún efecto
porque no tenemos texto posterior. Eso es una cosa,
ese es el encabezado, para las pestañas es bastante similar. Allí podemos ir a nuestro navegador de pestañas que estamos creando,
como el navegador de
pestañas
inferior del material y esto, por supuesto, tiene nuestro tabScreenConfig y luego este segundo objeto donde configuramos el navegador y,
como siempre en
React navigation, es el segundo objeto donde puede controlar la apariencia general de las
cosas específicas del navegador, como en el caso del navegador de pestañas, el color del icono de
la pestaña, el color de la barra, el color del tinte o también el estilo de la etiqueta y, de hecho, aquí en las opciones
de la barra de pestañas para navegador de pestañas inferior, podemos agregar
un estilo de etiqueta y nuevamente, esto apunta
al componente de texto que contiene nuestra etiqueta, podemos agregar una familia
de fuentes aquí de OpenSans-Bold para que podamos ver claramente la diferencia, si esto se recarga, ahora esto claramente
Es un texto en negrita. En realidad, esto no se ve tan
mal, por lo que creo que podemos
mantener esto, pero por supuesto, también podría configurarlo para abrir sans si desea una versión más delgada,
pero ahora usaría nuestra propia fuente. Ahora para Android,
aquí el navegador de pestañas inferior del material también tiene algunas opciones de configuración, pero en realidad no
tiene un estilo de etiqueta.
Lo que puede hacer allí es en las pestañas separadas que está cargando, por lo que en las opciones de navegación
de las pestañas que está cargando, donde también está configurando el icono de la barra de pestañas, etc., podemos agregar la etiqueta de la barra de pestañas
aquí donde podríamos establecer una etiqueta como comidas, múltiples marcas de explicación para anular lo que usamos como etiqueta ahora tanto en
iOS
como también en Android y que en realidad puede ser una cadena como esta, pero también puede establecer esto
en un componente React, para un componente de texto a saber, y luego allí, puede configurar su etiqueta, comidas, pero por supuesto
ahora aquí, puede agregar estilo y agregar los estilos que desee.
Por lo tanto, es una pequeña solución, ya que no hay otra forma integrada de diseñar esto para
el navegador de pestañas inferiores del material, pero mejor que nada.
Entonces, aquí, ahora podemos establecer la familia de fuentes en OpenSans-Bold y, si lo hacemos, también tenemos que asegurarnos de
importar el componente de texto de React Native porque de lo contrario no podemos usarlo allí y
ahora con eso , también obtenemos esto en nuestro iOS, por supuesto, porque estamos compartiendo la configuración, lo
arreglaremos en un segundo, pero ahora, así es como podemos configurar nuestro propio estilo allí, pero
por supuesto, ahora perdimos el color que es la desventaja de configurar esto manualmente aquí y dado que solo necesitamos esta solución aquí, para
Android, para las pestañas inferiores del material, la solución más fácil es usar la API de la plataforma y solo establecer esta etiqueta de
barra de pestañas en este componente de texto si ' estamos en Android porque solo entonces,
necesitamos esta solución alternativa para configurar la familia de fuentes. Así que comprobaré si estamos en Android y, si ese es
el caso, devolveré un componente de texto aquí, de lo contrario solo devolveré las comidas de texto y luego la ventaja de simplemente devolver
un texto aquí es simplemente que nuestro otro la configuración que establece el color de tinte y el estilo
de etiqueta, etc., se activará y no se anulará. Si configuramos nuestro propio componente de texto, deshabilitaremos todas esas características
predeterminadas, todas estas características predeterminadas que están integradas en el navegador de pestañas inferior.
El problema con el navegador de pestañas inferior del material es que simplemente no tiene todas estas
características predeterminadas
incorporadas, por lo que debemos anular esto, pero solo tenemos que hacer esto para Android por otro lado.
Ahora podemos copiar eso y hacer exactamente lo mismo aquí, por
supuesto, para favoritos, renderizar favoritos como texto en iOS y, por supuesto, también en el componente de texto para Android y con eso, ahora deberíamos tener un estilo
que funcione y esto se ve bien . En iOS allí, básicamente no
cambiamos nada y en Android, ahora también tenemos nuestras propias fuentes personalizadas.
Por lo tanto, se trata de una solución temporal que
desafortunadamente se requiere aquí cuando se trabaja con el navegador de pestañas inferiores, pero no es demasiado difícil de implementar y, con eso, nos
estamos asegurando de que estamos usando nuestra propia fuente personalizada en todas partes en la navegación relacionada características
de nuestra aplicación.