Una guía sobre el uso de fuentes personalizadas en React Native

React Native proporciona varios estilos de fuente predeterminados para elegir al crear su aplicación. Sin embargo, para ofrecer a su aplicación la originalidad y la individualidad que necesita para sobresalir en un mercado abarrotado, es posible que de vez en cuando necesite usar fuentes personalizadas.

Aprendamos cómo aplicar fuentes personalizadas al crear su próximo proyecto React Native.

Comprensión de los formatos de archivo de fuentes

Con React Native, puede agregar archivos de fuentes personalizados a un proyecto y personalizar la apariencia de los elementos de texto en sus aplicaciones. Estas fuentes personalizadas vienen en archivos de fuentes con diferentes formatos de archivo. Los archivos contienen información de estilo codificada para un tipo de fuente específico.

Los formatos de archivo de fuente más comunes que usará en el desarrollo móvil de React Native son:

• Fuente TrueType (TTF): este es un formato de archivo de fuente común compatible con la mayoría de los sistemas operativos y aplicaciones. Los archivos TTF son relativamente pequeños y pueden contener muchos caracteres.
  instagram viewer
• Fuente OpenType (OTF): es similar a TTF pero también puede contener funciones tipográficas avanzadas. Los archivos OTF son más grandes que los archivos TTF y no todas las aplicaciones los admiten.
• Fuente OpenType integrada (EOT): los archivos EOT están comprimidos y pueden incluir información de administración de derechos digitales (DRM) para evitar el uso no autorizado. Sin embargo, no todos los navegadores son compatibles con EOT y, por lo general, no se recomienda su uso en proyectos modernos.

Al usar fuentes personalizadas en un proyecto, es importante elegir un formato de archivo de fuente que satisfaga las necesidades del proyecto. Esto puede implicar factores como la compatibilidad con la plataforma de destino, el tamaño del archivo, los requisitos de licencia y la compatibilidad con funciones tipográficas avanzadas.

Importación y aplicación de archivos de fuentes en React Native

Puede descargar un archivo de fuente desde cualquier lugar de Internet e importarlo a su proyecto personal de React Native para usarlo. Sin embargo, hay muchos sitios web buenos y seguros para descargar fuentes gratis de forma segura.

Para importar un archivo de fuente a su proyecto React Native, cree un recursos/fuentes directorio en la raíz de su proyecto y mueva los archivos de fuentes a él.

Los pasos necesarios para usar fuentes personalizadas varían cuando se trabaja con un proyecto generado puramente por React Native o un proyecto React Native administrado por Expo.

Reaccionar CLI nativa

Si está trabajando con un proyecto generado por CLI de React Native, cree un reaccionar nativo.config.js archivo y defina estas configuraciones dentro de él:

módulo.exportaciones = {
 proyecto: {
 io: {},
 androide: {}
 },
 activos: [ './activos/fuentes/' ],
}

Esta configuración le dice al proyecto que incluya activos de fuentes almacenados en el "./activos/fuentes/" directorio para que la aplicación pueda acceder a ellos al renderizar elementos de texto.

A continuación, puede vincular el activos carpeta a su proyecto ejecutando lo siguiente:

npx reaccionar-activo-nativo

enlace nativo de reacción npx

Ahora puede usar las fuentes personalizadas vinculadas como lo haría normalmente en su estilo CSS llamando a su nombre exacto en el estilo de familia de fuentes:

¡Hola, Mundo!</Text>
constante estilos = StyleSheet.create({
 texto de fuente: {
 Familia tipográfica: 'Prisma de inclinación',
 tamaño de fuente: 20,
 },
});

Expo-CLI

Para proyectos generados por Expo, debe instalar la biblioteca de fuentes de exposición como una dependencia para importar y aplicar fuentes personalizadas. Instálalo con este comando:

npx expo instalar expo-fuente

Ahora puede usar fuentes expo en su archivo de proyecto así:

importar Reaccionar, { estado de uso, efecto de uso } de'reaccionar';
importar { Texto, Vista, Hoja de estilo } de'reaccionar-nativo';
importar * como Fuente de'expo-fuente';
constante Texto personalizado = (accesorios) => {
constante [fontLoaded, setFontLoaded] = useState(FALSO);
 usarEfecto(() => {
asíncronofuncióncargar fuente() {
esperar Fuente.loadAsync({
'Fuente personalizada': requerir('./activos/fuentes/FuentePersonalizada.ttf'),
 });
 establecer fuente cargada (verdadero);
 }
 cargarFuente();
 }, []);
si (! fuente cargada) {
devolver<Texto>Cargando...Texto>;
 }
devolver (
Familia tipográfica: 'Fuente personalizada' }}>
 {accesorios.niños}
 </Text>
 );
};
constante aplicación = () => {
devolver (

¡Hola, mundo!</CustomText>
 </View>
 );
};
constante estilos = StyleSheet.create({
 envase: {
 doblar: 1,
 justificar el contenido: 'centro',
 alinear elementos: 'centro',
 },
 texto: {
 tamaño de fuente: 24,
 fuentePeso: 'atrevido',
 },
});
exportarpor defecto aplicación;

Puede renovar y mejorar el bloque de código anterior aplicando el patrón de diseño de contenedores y componentes de presentación.

Aquí está el resultado de las aplicaciones React Native CLI y Expo CLI:

Configuración de una fuente personalizada como fuente predeterminada para su aplicación Expo

Es posible que desee utilizar una fuente personalizada como fuente predeterminada para toda su aplicación React Native en lugar de aplicarla a cada uno. Texto componente individualmente. Para ello, puede utilizar el Texto componente accesorios predeterminados para establecer la familia de fuentes predeterminada para todos Texto componentes en su aplicación.

Utilizar el Text.defaultProps propiedad para establecer la Familia tipográfica propiedad al nombre de su fuente personalizada.

Aquí hay un ejemplo:

importar Reaccionar, {useEffect} de'reaccionar';
importar { Texto } de'reaccionar-nativo';
importar * como Fuente de'expo-fuente';
constante aplicación = () => {
 usarEfecto(() => {
asíncronofuncióncargar fuente() {
esperar Fuente.loadAsync({
'Fuente personalizada': requerir('./activos/fuentes/FuentePersonalizada.ttf'),
 });
 Texto.defaultProps.style.fontFamily = 'Fuente personalizada';
 }
 cargarFuente();
 }, []);
devolver (
¡Hola, mundo!</Text>
 );
};
exportarpor defecto aplicación;

Configuración de la familia de fuentes predeterminada mediante Text.defaultProps solo afectará a los componentes de texto que se crean después de establecer el valor predeterminado. Si ya ha creado componentes de texto antes de configurar la familia de fuentes predeterminada, deberá configurar el Familia tipográfica propiedad en esos componentes individualmente.

Creación de una familia de fuentes personalizada con varios estilos de fuente

Para crear una familia de fuentes personalizada con múltiples estilos de fuentes en una aplicación generada por CLI de React Native, primero deberá importar los archivos de fuentes a su proyecto. A continuación, cree un objeto de familia de fuentes personalizado que asigne pesos y estilos de fuentes a sus rutas de archivos de fuentes correspondientes.

Por ejemplo:

importar { Texto } de'reaccionar-nativo';
importar Fuentes personalizadas de'../config/Fuentes';
constante aplicación = () => {
constante Fuentes personalizadas = {
'Fuente personalizada-Regular': requerir('../fuentes/FuentePersonalizada-Regular.ttf'),
'Fuente personalizada-negrita': requerir('../fuentes/CustomFont-Bold.ttf'),
'Fuente personalizada-cursiva': requerir('../fuentes/CustomFont-Italic.ttf'),
 };
asíncrono componenteHizoMontar() {
esperar Font.loadAsync (fuentes personalizadas);
 }
devolver(

 ¡Hola Mundo!
 </Text>
 );
};
constante estilos = StyleSheet.create({
 texto: {
 Familia tipográfica: 'Fuente personalizada-Regular',
 Estilo de fuente: 'itálico',
 fuentePeso: 'atrevido',
 tamaño de fuente: 20,
 },
});
exportarpor defecto aplicación;

Tenga en cuenta que las rutas y los nombres de los archivos de fuentes en este ejemplo son solo marcadores de posición, y deberá reemplazarlos con las rutas y los nombres de los archivos de fuentes reales. Además, debe asegurarse de que sus archivos de fuentes personalizadas se importen correctamente a su proyecto y que sus rutas coincidan con las definidas en su objeto de familia de fuentes.

Reflexiones finales sobre fuentes personalizadas en React Native

Las fuentes personalizadas pueden agregar un toque único y personalizado a su aplicación React Native. En este artículo, hemos discutido cómo usar fuentes personalizadas en React Native, incluida la importación de archivos de fuentes, la configuración de una fuente personalizada como la fuente predeterminada para toda la aplicación, creando una familia de fuentes personalizada con múltiples estilos de fuente y cargando fuentes personalizadas sin usar Exposición.

Siempre verifique las restricciones de licencia de cualquier fuente que use y asegúrese de tener permiso para usarla en su aplicación. También es importante tener en cuenta que cargar varias fuentes personalizadas puede aumentar el tamaño de su aplicación, por lo que solo debe incluir las fuentes que realmente necesita.