Saltar al contenido

¿Cómo configurar la familia de fuentes predeterminada en React Native?

Si encuentras algún error en tu código o proyecto, recuerda probar siempre en un ambiente de testing antes subir el código al trabajo final.

Solución:

La forma recomendada es crear su propio componente, como MyAppText. MyAppText sería un componente simple que representa un componente de texto usando su estilo universal y puede pasar a través de otros accesorios, etc.

https://facebook.github.io/react-native/docs/text.html#herencia de estilo limitado

Recientemente se creó un módulo de nodo que resuelve este problema, por lo que no tengo que crear otro componente.

https://github.com/Ajackster/react-native-global-props

https://www.npmjs.com/package/react-native-global-props

La documentación establece que en su componente de orden más alto, importe el setCustomText funcionar como tal.

import  setCustomText  from 'react-native-global-props';

Luego, cree el estilo/accesorios personalizados que desea para el nativo de reacción Text componente. En tu caso, te gustaría Familia tipográfica para trabajar en cada Text componente.

const customTextProps =  
  style:  
    fontFamily: yourFont
  

Llama a setCustomText y pase sus accesorios/estilos a la función.

setCustomText(customTextProps);

Y luego todos reaccionan nativos Text los componentes tendrán su declarado Familia tipográfica junto con cualquier otro accesorio/estilo que proporcione.

Para React Native 0.56.0+, verifique si defaultProps está definido primero:

Text.defaultProps = Text.defaultProps || 

Luego añade:

Text.defaultProps.style =   fontFamily: 'some_font' 

Agregue lo anterior en el constructor del archivo App.js (o cualquier componente raíz que tenga).

Para anular el estilo, puede crear un objeto de estilo y distribuirlo y luego agregar su estilo adicional (p. ej. ...baseStyle, fontSize: 16 )

Te mostramos comentarios y valoraciones

Si piensas que ha sido de provecho este post, sería de mucha ayuda si lo compartieras con otros juniors y nos ayudes a extender nuestro contenido.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *