react native font demo

逐步指南，用於一致的多平台字體字體體驗React Native

目標

能夠在iOS和Android中使用字體字體修飾符，例如fontWeight和fontStyle與自定義字體家族結合使用。

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

在此示例中，我們將註冊Raleway字體家庭。當然，此方法將使用任何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上，通過LCDF型釀造啤酒包進行安裝。

otfinfo --family Raleway-Regular.ttf

應該打印“ Raleway”。必須保留此值的Android設置。此名稱將以fontFamily樣式使用。

設定

react-native init FontDemo
cd FontDemo

安卓

對於Android，我們將使用XML字體來定義基本字體系列的變體。

備註：此過程可在React Native中獲得，因為COMPL FD6386A07EB75A8EC16B1384A3E3E5827DEA520B64（2019年5月7日），並添加了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 / 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方法中創建的資產來綁定字體家族名稱。

配x如果要註冊其他字體，請確保將“ 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());
   }

在反應天然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 Native Asset Link功能。此方法要求我們將在第一步中檢索到的字體家族名稱作為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	安卓

Postscriptum

如果您發現本指南相關，我將非常感謝您對此stackoverflow的答案進行投票。這也將有助於社區找出這一解決方案。乾杯!