react native font faces

Reagieren Sie native Schriftflächen

Leicht @font-face-Verhalten in React-nativemulieren.

Motivation:

Die Verwendung von benutzerdefinierten Schriftarten in React Native wird kompliziert, wenn Sie versuchen, mit unterschiedlichen Schriftgewichten und Stilen zu arbeiten. Obwohl der typische type von React native TextStyle Eigenschaften für fontFamily , fontWeight und fontStyle enthält, scheinen diese Eigenschaften nur für die Standard-integrierten Schriftarten zu funktionieren und bei der Verwendung benutzerdefinierter Schriftarten nur begrenzte Unterstützung zu erhalten. Aus diesem Grund wird traditionell die Auswahl eines bestimmten Schriftgewichts und Stils erreicht, indem der genaue PostScript -Name der gewünschten geladenen Schriftart Datei angegeben wird.

Zum Beispiel:

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

Dies macht es schwierig, zusammengeführte Stile oder Textstil -Kompositionen zu erreichen. Eine bevorzugte Lösung könnte so etwas sein:

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

Diese Bibliothek soll das Leben erleichtern, indem React -native Entwickler fontWeight und fontStyle mit benutzerdefinierten Schriftarten auf iOS, Android und Web verwendet werden können.

Erste Schritte

1. Fügen Sie die erforderlichen Abhängigkeiten zum package.json Ihrer Anwendung hinzu. JSON:

   yarn add react-native-font-faces

   Wenn Sie Expo verwenden und zusätzliche benutzerdefinierte Schriftartdateien in Ihre App laden müssen, fügen Sie auch Folgendes hinzu:

   yarn add expo-font

2. Fügen Sie einen Anruf in enableFontFaces() Einstiegspunkt Ihrer Anwendung hinzu und importieren Sie die gewünschten Schriftarten. Verwenden Sie dann einfach die Schriftfamilie, wie Sie es normalerweise erwarten würden:

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

Migrieren von 3.x

In Version 4.x haben wir FontFacesProvider entfernt und enableFontFaces hinzugefügt. Befolgen Sie diese Schritte zum Migrieren:

1. Entfernen Sie alle Instanzen von <FontFacesProvider /> .
2. Fügen Sie einen Anruf in den Einstiegspunkt Ihrer Anwendung hinzu, um enableFontFaces() .
3. (Optional) Fügen Sie einen Aufruf an useFonts() (Expo-Font) oder loadFonts() (React-Native-Dynamic-FONTs) hinzu, um Remote-Schriftarten dynamisch zu laden.

Migrieren von 2.x

In Version 3.x haben wir FontFacesProvider vereinfacht und useFontFaces entfernt. Befolgen Sie diese Schritte zum Migrieren:

1. Entfernen Sie alle Instanzen von useFontFaces() .
2. Aktualisieren Sie die <FontFacesProvider/> der Anwendung, um die onLoading und onError -Requisiten (optional) bereitzustellen.

Migrieren von 1.x

In Version 2.x haben wir FontFacesProvider und useFontFaces eingeführt und enableFontFaces entfernt. Befolgen Sie diese Schritte zum Migrieren:

1. Entfernen Sie alle Fälle von enableFontFaces() .
2. Fügen Sie eine <FontFacesProvider/> um die Root -Komponente Ihrer Anwendung hinzu.
3. Fügen Sie const [fontsLoaded] = useFontFaces(...) im Körper einer inneren Funktionskomponente und verarbeiten Sie den fontsLoaded angemessen.