react native font faces

رد فعل خطوط الخط الأصلي

محاكاة بسهولة @Font-Face السلوك في React-Itist.

تحفيز:

يصبح استخدام الخطوط المخصصة في React Native معقدًا عند محاولة العمل مع أوزان وأنماط الخطوط المختلفة. على الرغم من أن نوع React Native TextStyle يتضمن خصائص لـ fontFamily و fontWeight و fontStyle ، يبدو أن هذه الخصائص تعمل فقط للخطوط المدمجة الافتراضية ، ولديها دعم محدود عند استخدام الخطوط المخصصة. لهذا السبب ، يتم تحديد وزن وخط خط معين تقليديًا من خلال تحديد اسم PostScript الدقيق لملف الخط الذي تم تحميله المطلوب.

على سبيل المثال:

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

هذا يجعل من الصعب تحقيق أنماط مدمجة أو تكوين نمط النص. قد يكون الحل المفضل مثل هذا:

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

تهدف هذه المكتبة إلى جعل الحياة أسهل من خلال السماح للمطورين الأصليين React باستخدام fontWeight و fontStyle مع خطوط مخصصة على iOS و Android و Web.

ابدء

1. أضف التبعيات المطلوبة إلى package.json التطبيق الخاصة بك. json:

   yarn add react-native-font-faces

   إذا كنت تستخدم Expo وتحتاج إلى تحميل ملفات خطوط مخصصة إضافية في التطبيق الخاص بك ، أضف أيضًا ما يلي:

   yarn add expo-font

2. أضف مكالمة إلى enableFontFaces() في نقطة إدخال التطبيق الخاصة بك ، واستيراد وجوه الخط المطلوب. ثم استخدم عائلة الخط كما تتوقع عادة:

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

ترحيل من 3.x

في الإصدار 4.x ، أزلنا FontFacesProvider وأضفنا enableFontFaces . اتبع هذه الخطوات للترحيل:

1. إزالة جميع حالات <FontFacesProvider /> .
2. أضف مكالمة إلى enableFontFaces() في نقطة إدخال التطبيق الخاصة بك.
3. (اختياري) إضافة مكالمة إلى useFonts() (المعرض) أو loadFonts() (الولادة الديناميكية المتفاعلة) لتحميل الخطوط البعيدة ديناميكيا.

ترحيل من 2.x

في الإصدار 3.x ، قمنا بتبسيط FontFacesProvider وإزالة useFontFaces . اتبع هذه الخطوات للترحيل:

1. إزالة جميع مثيلات useFontFaces() .
2. قم بتحديث تطبيق <FontFacesProvider/> لتوفير الدعائم onLoading و onError (اختياري).

ترحيل من 1.x

في الإصدار 2.x ، قدمنا FontFacesProvider و useFontFaces ، وإزالتها enableFontFaces . اتبع هذه الخطوات للترحيل:

1. إزالة جميع مثيلات enableFontFaces() .
2. أضف <FontFacesProvider/> حول مكون جذر التطبيق الخاص بك.
3. أضف const [fontsLoaded] = useFontFaces(...) داخل جسم مكون دالة داخلية والتعامل مع القيمة fontsLoaded بشكل مناسب.