react native font faces

Reaccionar caras de fuentes nativas

Emular fácilmente el comportamiento de la cara de la fuente en react-nativo.

Motivación:

El uso de fuentes personalizadas en React Native se complica cuando se trata de trabajar con diferentes pesos y estilos de fuentes. A pesar de que el tipo React Native TextStyle incluye propiedades para fontFamily , fontWeight y fontStyle , estas propiedades parecen funcionar solo para las fuentes incorporadas predeterminadas y tienen un soporte limitado cuando se usan fuentes personalizadas. Por esta razón, la selección de un peso y estilo de fuente específicos se logra tradicionalmente especificando el nombre exacto de PostScript del archivo de fuente cargado deseado.

Por ejemplo:

 const style : ViewStyle = {
  fontFamily : 'Roboto-MediumItalic' ,
} ;

Esto hace que sea difícil lograr estilos fusionados o composición de estilo de texto. Una solución preferible podría ser algo como esto:

 const style : ViewStyle = {
  fontFamily : 'Roboto' ,
  fontWeight : '500' ,
  fontStyle : 'italic' ,
} ;

Esta biblioteca tiene como objetivo facilitar la vida al permitir que los desarrolladores de React Native usen fontWeight y fontStyle con fuentes personalizadas en iOS, Android y Web.

Empezando

1. Agregue las dependencias requeridas al package.json de su aplicación.json:

   yarn add react-native-font-faces

   Si está utilizando Expo y necesita cargar archivos de fuente personalizados adicionales en su aplicación, también agregue lo siguiente:

   yarn add expo-font

2. Agregue una llamada a enableFontFaces() en el punto de entrada de su aplicación e importe las caras de fuentes deseadas. Entonces usa la familia de fuentes como normalmente esperaría:

    // App.tsx
   
   import React from 'react' ;
   import { useFonts } from 'expo-font' ;
   import { AppLoading } from 'expo' ;
   import { AppContent } from './AppContent' ;
   import { Roboto_All , enableFontFaces , getExpoFontMap } from 'react-native-font-faces' ;
   
   enableFontFaces ( Roboto_All ) ;
   
   export default function App ( ) {
     const [ loaded , error ] = useFonts ( getExpoFontMap ( Roboto_All ) ) ;
   
     if ( ! loaded ) {
       return < AppLoading /> ;
     } else if ( error ) {
       return < Text > { error . message } </ Text > ;
     } else {
       return (
         < View style = { styles . container } >
           < StatusBar style = "auto" />
           < Text style = { styles . text } > This should be Regular </ Text >
           < Text style = { [ styles . text , styles . italic ] } > This should be Italic </ Text >
           < Text style = { [ styles . text , styles . bold ] } > This should be Bold </ Text >
           < Text style = { [ styles . text , styles . bold , styles . italic ] } > This should be BoldItalic </ Text >
           < Text style = { [ styles . text , styles . thin ] } > This should be Thin </ Text >
           < Text style = { [ styles . text , styles . thin , styles . italic ] } > This should be ThinItalic </ Text >
         </ View >
       ) ;
     }
   }
   
   const styles = StyleSheet . create ( {
     text : {
       fontFamily : 'Roboto' ,
     } ,
     bold : {
       fontWeight : 'bold' ,
     } ,
     thin : {
       fontWeight : '100' ,
     } ,
     italic : {
       fontStyle : 'italic' ,
     } ,
     container : {
       flex : 1 ,
       backgroundColor : '#fff' ,
       alignItems : 'center' ,
       justifyContent : 'center' ,
     } ,
   } ) ; 

Migrando desde 3.x

En la versión 4.x, eliminamos FontFacesProvider y agregamos enableFontFaces . Siga estos pasos para migrar:

1. Elimine todas las instancias de <FontFacesProvider /> .
2. Agregue una llamada a enableFontFaces() en el punto de entrada de su aplicación.
3. (Opcional) Agregue una llamada a useFonts() (expo-font) o loadFonts() (react-native-dynamic-font) para cargar dinámicamente fuentes remotas.

Migrando desde 2.x

En la versión 3.x, simplificamos FontFacesProvider y eliminamos useFontFaces . Siga estos pasos para migrar:

1. Elimine todas las instancias de useFontFaces() .
2. Actualice el <FontFacesProvider/> de su aplicación para proporcionar los accesorios onLoading y onError (opcional).

Migrando de 1.x

En la versión 2.x, introdujimos FontFacesProvider y useFontFaces , y eliminamos enableFontFaces . Siga estos pasos para migrar:

1. Elimine todas las instancias de enableFontFaces() .
2. Agregue un <FontFacesProvider/> alrededor del componente raíz de su aplicación.
3. Agregue const [fontsLoaded] = useFontFaces(...) dentro del cuerpo de un componente de función interna y maneje el valor fontsLoaded adecuadamente.