react native font faces

Bereaksi wajah font asli

Mudah meniru perilaku font-wajah dalam reaksi-asli.

Motivasi:

Menggunakan font khusus di React Native menjadi rumit ketika mencoba bekerja dengan bobot dan gaya font yang berbeda. Meskipun tipe TextStyle asli React mencakup properti untuk fontFamily , fontWeight dan fontStyle , properti ini tampaknya hanya berfungsi untuk font bawaan default, dan memiliki dukungan terbatas saat menggunakan font khusus. Untuk alasan ini, memilih bobot dan gaya font tertentu secara tradisional dicapai dengan menentukan nama postscript yang tepat dari file font yang diinginkan.

Misalnya:

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

Ini membuatnya sulit untuk mencapai gaya gabungan atau komposisi gaya teks. Solusi yang lebih disukai mungkin seperti ini:

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

Perpustakaan ini bertujuan untuk membuat hidup lebih mudah dengan membiarkan pengembang asli bereaksi menggunakan fontWeight dan fontStyle dengan font khusus di iOS, android, dan web.

Memulai

1. Tambahkan dependensi yang diperlukan ke package.json aplikasi Anda.json:

   yarn add react-native-font-faces

   Jika Anda menggunakan Expo dan perlu memuat file font khusus tambahan ke dalam aplikasi Anda, juga tambahkan yang berikut:

   yarn add expo-font

2. Tambahkan panggilan ke enableFontFaces() di titik masuk aplikasi Anda, dan impor wajah font yang diinginkan. Maka cukup gunakan keluarga font seperti yang biasanya Anda harapkan:

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

Bermigrasi dari 3.x

Dalam versi 4.x, kami menghapus FontFacesProvider dan menambahkan enableFontFaces . Ikuti langkah -langkah ini untuk bermigrasi:

1. Hapus semua contoh <FontFacesProvider /> .
2. Tambahkan panggilan ke enableFontFaces() di titik masuk aplikasi Anda.
3. (Opsional) Tambahkan panggilan ke useFonts() (Expo-Font) atau loadFonts() (react-native-dinamis-font) untuk memuat font jarak jauh secara dinamis.

Bermigrasi dari 2.x

Dalam versi 3.x, kami menyederhanakan FontFacesProvider dan menghapus useFontFaces . Ikuti langkah -langkah ini untuk bermigrasi:

1. Hapus semua contoh useFontFaces() .
2. Perbarui <FontFacesProvider/> aplikasi Anda untuk menyediakan alat peraga onLoading dan onError (opsional).

Bermigrasi dari 1.x

Dalam versi 2.x, kami memperkenalkan FontFacesProvider dan useFontFaces , dan dihapus enableFontFaces . Ikuti langkah -langkah ini untuk bermigrasi:

1. Hapus semua contoh enableFontFaces() .
2. Tambahkan <FontFacesProvider/> di sekitar komponen root aplikasi Anda.
3. Tambahkan const [fontsLoaded] = useFontFaces(...) di dalam tubuh komponen fungsi dalam dan menangani nilai fontsLoaded dengan tepat.