الصفحة الرئيسية>موارد بناء الموقع>تحميل الخط
تنزيل

دليل خطوة بخطوة لتجربة محرف الخطوط المتعددة المنصات المتسقة في React Native

هدف

كن قادرًا على استخدام معدلات محرف الخط مثل fontWeight و fontStyle مع عائلة خطوط مخصصة ، في كل من iOS و Android. 

 < Text style = { {
  fontFamily : "Raleway" ,
  fontWeight : "100" ,
  style : "italic"
} } >
  Hello world!
</ Text >
< Text style = { {
  fontFamily : "Raleway" ,
  fontWeight : "bold" ,
  style : "normal"
} } >
  Hello world !
< / Text >

على سبيل المثال ، سنقوم بتسجيل عائلة Font Raleway . بالطبع ، ستعمل هذه الطريقة مع أي خط TTF.

المتطلبات الأساسية

أصول

تحتاج إلى عائلة Font بأكملها ، مستخرجة في مجلد مؤقت. إنه:

  • Raleway-Thin.ttf (100)
  • Raleway-ThinItalic.ttf
  • Raleway-ExtraLight.ttf (200)
  • Raleway-ExtraLightItalic.ttf
  • Raleway-Light.ttf (300)
  • Raleway-LightItalic.ttf
  • Raleway-Regular.ttf (400)
  • Raleway-Italic.ttf
  • Raleway-Medium.ttf (500)
  • Raleway-MediumItalic.ttf
  • Raleway-SemiBold.ttf (600)
  • Raleway-SemiBoldItalic.ttf
  • Raleway-Bold.ttf (700)
  • Raleway-BoldItalic.ttf
  • Raleway-ExtraBold.ttf (800)
  • Raleway-ExtraBoldItalic.ttf
  • Raleway-Black.ttf (900)
  • Raleway-BlackItalic.ttf

سوف نفترض أن هذه الملفات يتم تخزينها الآن في /tmp/raleway/ .

ابحث عن اسم عائلة الخط

ستحتاج إلى تثبيت OTFINFO في نظامك لأداء هذه الخطوة. يتم شحنها مع العديد من توزيعات Linux. على MacOS ، قم بتثبيته عبر حزمة LCDF-Typetools Brew. 

otfinfo --family Raleway-Regular.ttf

يجب أن تطبع "Raleway". يجب الاحتفاظ بهذه القيمة لإعداد Android. سيتم استخدام هذا الاسم بأسلوب React fontFamily .

يثبت 

react-native init FontDemo
cd FontDemo

Android

بالنسبة لنظام Android ، سنستخدم خطوط XML لتحديد المتغيرات لعائلة الخط الأساسي.

الملاحظة : يتوفر هذا الإجراء في React Native لأن الالتزام FD6386A07EB75A8EC16B1384A3E5827DEA520B64 (7 مايو 2019) ، مع إضافة ReactFontManager::addCustomFont .

1. انسخ الأصول وإعادة تسميتها إلى مجلد خط الموارد 
mkdir android/app/src/main/res/font
cp /tmp/raleway/ * .ttf android/app/src/main/res/font

يجب علينا إعادة تسمية ملفات الخط باتباع هذه القواعد للامتثال لقيود أسماء الأصول Android:

  • استبدال - بـ _ ؛
  • استبدل أي حرف كبير مع نظيره الصغير.

يمكنك استخدام البرنامج النصي أدناه Bash (تأكد من إعطاء مجلد الخط كوسيطة أولى): 

 #! /bin/bash
# fixfonts.sh

typeset folder= " $1 "
if [[ -d " $folder " && ! -z " $folder " ]] ; then
  pushd " $folder " ;
  for file in * .ttf ; do
    typeset normalized= " ${file // - / _} " ;
    normalized= " ${normalized,,} " ;
    mv " $file " " $normalized "
  done
  popd
fi 
./fixfonts.sh /path/to/root/FontDemo/android/app/src/main/res/font
2. إنشاء ملف التعريف

قم بإنشاء ملف android/app/src/main/res/font/raleway.xml مع المحتوى أدناه. في الأساس ، يجب علينا إنشاء إدخال واحد لكل مجموعة fontStyle / fontWeight التي نرغب في دعمها ، وتسجيل اسم الأصل المقابل. 

<? xml version = " 1.0 " encoding = " utf-8 " ?>
< font-family xmlns : app = " http://schemas.android.com/apk/res-auto " >
    < font app : fontStyle = " normal " app : fontWeight = " 100 " app : font = " @font/raleway_thin " />
    < font app : fontStyle = " italic " app : fontWeight = " 100 " app : font = " @font/raleway_thinitalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 200 " app : font = " @font/raleway_extralight " />
    < font app : fontStyle = " italic " app : fontWeight = " 200 " app : font = " @font/raleway_extralightitalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 300 " app : font = " @font/raleway_light " />
    < font app : fontStyle = " italic " app : fontWeight = " 300 " app : font = " @font/raleway_lightitalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 400 " app : font = " @font/raleway_regular " />
    < font app : fontStyle = " italic " app : fontWeight = " 400 " app : font = " @font/raleway_italic " />
    < font app : fontStyle = " normal " app : fontWeight = " 500 " app : font = " @font/raleway_medium " />
    < font app : fontStyle = " italic " app : fontWeight = " 500 " app : font = " @font/raleway_mediumitalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 600 " app : font = " @font/raleway_semibold " />
    < font app : fontStyle = " italic " app : fontWeight = " 600 " app : font = " @font/raleway_semibolditalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 700 " app : font = " @font/raleway_bold " />
    < font app : fontStyle = " italic " app : fontWeight = " 700 " app : font = " @font/raleway_bolditalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 800 " app : font = " @font/raleway_extrabold " />
    < font app : fontStyle = " italic " app : fontWeight = " 800 " app : font = " @font/raleway_extrabolditalic " />
    < font app : fontStyle = " normal " app : fontWeight = " 900 " app : font = " @font/raleway_black " />
    < font app : fontStyle = " italic " app : fontWeight = " 900 " app : font = " @font/raleway_blackitalic " />
</ font-family >
3. سجل الخط الجديد

في android/app/src/main/java/com/fontdemo/MainApplication.java ، قم بربط اسم عائلة الخط مع الأصل الذي أنشأناه للتو داخل طريقة onCreate .

️ إذا كنت تقوم بتسجيل خط مختلف ، فتأكد من استبدال "Raleway" بالاسم الموجود في الخطوة السابقة (Find Font Family Name). 

 --- a/android/app/src/main/java/com/fontdemo/MainApplication.java
+++ b/android/app/src/main/java/com/fontdemo/MainApplication.java
@@ -7,6 +7,7 @@ import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
+ import com.facebook.react.views.text.ReactFontManager;
 import com.facebook.soloader.SoLoader;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
@@ -43,6 +44,7 @@ public class MainApplication extends Application implements ReactApplication {
   @Override
   public void onCreate() {
     super.onCreate();
+    ReactFontManager.getInstance().addCustomFont(this, "Raleway", R.font.raleway);
     SoLoader.init(this, /* native exopackage */ false);
     initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   }

على React Native 0.73+ 

 --- a/android/app/src/main/java/com/fontdemo/MainApplication.kt
+++ b/android/app/src/main/java/com/fontdemo/MainApplication.kt
import com.facebook.react.ReactApplication
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
+ import com.facebook.react.common.assets.ReactFontManager
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.facebook.react.defaults.DefaultReactNativeHost


  override fun onCreate() {
    super.onCreate()
+    ReactFontManager.getInstance().addCustomFont(this, "Raleway", R.font.raleway);
    SoLoader.init(this, false)
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      // If you opted-in for the New Architecture, we load the native entry point for this app.
      load()
    }
    ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
  }

iOS

على iOS ، سوف تصبح الأمور أسهل بكثير. سنحتاج فقط إلى استخدام وظيفة رابط الأصول الأصلية React. تتطلب هذه الطريقة أن نستخدم اسم عائلة الخط الذي تم استرداده في الخطوة الأولى كسمة نمط fontFamily .

نسخ ملفات الخط إلى مجلد الأصول 

mkdir -p assets/fonts
cp /tmp/raleway/ * .ttf assets/fonts

أضف react-native.config.js 

 module . exports = {
  project : {
    ios : { } ,
    android : { } ,
  } ,
  iosAssets : [ './assets/fonts' ] ,
} ;

وصلة 

 # react-native >= 0.69
npx react-native-asset

# otherwise
react-native link

نتيجة

iOS Android

PostScriptum

إذا وجدت هذا الدليل ذا صلة ، فسأقدر تقديراً كبيراً أنك ترفع إجابة Stackoverflow هذه. كما أنه سيساعد المجتمع على اكتشاف هذا الحل. هتافات!

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل