หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ดาวน์โหลดแบบอักษร
ดาวน์โหลด

คู่มือทีละขั้นตอนสำหรับประสบการณ์แบบอักษรแบบอักษรหลายแพลตฟอร์มที่สอดคล้องกันใน React Native

เป้าหมาย

สามารถใช้ตัวดัดแปลงตัวอักษรแบบอักษรเช่น fontWeight และ fontStyle ร่วมกับตระกูล Font ที่กำหนดเองทั้งใน iOS และ Android 

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

สำหรับตัวอย่างนี้เราจะลงทะเบียนตระกูล Raleway Font แน่นอนวิธีนี้จะทำงานกับแบบอักษร TTF ใด ๆ

ข้อกำหนดเบื้องต้น

สินทรัพย์

คุณต้องมีตระกูลฟอนต์ Raleway ทั้งหมดสกัดในโฟลเดอร์ชั่วคราว นั่นคือ:

  • 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 ให้ติดตั้งผ่านแพ็คเกจ Brew LCDF-Typetools 

otfinfo --family Raleway-Regular.ttf

ควรพิมพ์ "Raleway" ค่านี้จะต้องเก็บไว้สำหรับการตั้งค่า Android ชื่อนี้จะถูกใช้ในรูปแบบการตอบสนอง fontFamily

การตั้งค่า 

react-native init FontDemo
cd FontDemo

Android

สำหรับ Android เราจะใช้แบบอักษร XML เพื่อกำหนดตัวแปรของตระกูลแบบอักษรพื้นฐาน

หมายเหตุ : ขั้นตอนนี้มีอยู่ใน React Native ตั้งแต่ commit 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" ด้วยชื่อที่พบในขั้นตอนเดิม (ค้นหาชื่อครอบครัวตัวอักษร) 

 --- 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 นี้ นอกจากนี้ยังช่วยให้ชุมชนค้นหาวิธีแก้ปัญหานี้ ไชโย

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด