react native font faces

React Native Font Faces

Imitez facilement le comportement de la police dans le réactif-natif.

Motivation:

L'utilisation de polices personnalisées dans React Native devient compliquée lorsque vous essayez de travailler avec différents poids et styles de police. Même si le type TextStyle natif React comprend des propriétés pour fontFamily , fontWeight et fontStyle , ces propriétés semblent fonctionner uniquement pour les polices intégrées par défaut et ont un support limité lors de l'utilisation de polices personnalisées. Pour cette raison, la sélection d'un poids et d'un style de police spécifiques est traditionnellement obtenu en spécifiant le nom post-scriptum exact du fichier de police chargé souhaité.

Par exemple:

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

Il est difficile de réaliser des styles fusionnés ou une composition de style de texte. Une solution préférable pourrait être quelque chose comme ceci:

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

Cette bibliothèque vise à faciliter la vie en permettant aux développeurs natifs de React d'utiliser fontWeight et fontStyle avec des polices personnalisées sur iOS, Android et Web.

Commencer

1. Ajoutez les dépendances requises au package.json de votre application.json:

   yarn add react-native-font-faces

   Si vous utilisez Expo et que vous devez charger des fichiers de police personnalisés supplémentaires dans votre application, ajoutez également ce qui suit:

   yarn add expo-font

2. Ajoutez un appel pour enableFontFaces() au point d'entrée de votre application et importez les faces de police souhaitées. Ensuite, utilisez simplement la famille des polices comme vous vous y attendez normalement:

    // 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' ,
     } ,
   } ) ; 

Migration de 3.x

Dans la version 4.x, nous avons supprimé FontFacesProvider et ajouté enableFontFaces . Suivez ces étapes pour migrer:

1. Supprimez toutes les instances de <FontFacesProvider /> .
2. Ajoutez un appel pour enableFontFaces() sur le point d'entrée de votre application.
3. (Facultatif) Ajoutez un appel à useFonts() (Expo-Font) ou loadFonts() (react-native-dynamic-fonts) pour charger dynamiquement les polices distantes.

Migration à partir de 2.x

Dans la version 3.x, nous avons simplifié FontFacesProvider et supprimé useFontFaces . Suivez ces étapes pour migrer:

1. Supprimez toutes les instances d' useFontFaces() .
2. Mettez à jour <FontFacesProvider/> de votre application pour fournir les accessoires onLoading et onError (facultatif).

Migrant à partir de 1.x

Dans la version 2.x, nous avons introduit FontFacesProvider et useFontFaces et supprimé enableFontFaces . Suivez ces étapes pour migrer:

1. Supprimez toutes les instances d' enableFontFaces() .
2. Ajoutez un <FontFacesProvider/> autour du composant racine de votre application.
3. Ajouter const [fontsLoaded] = useFontFaces(...) à l'intérieur du corps d'un composant de fonction intérieur et gérer la valeur fontsLoaded de manière appropriée.