react-native 引入、添加、使用自定義字體

最終目的

在 react-native 中，能夠對 使用形以下面的配置而不報錯：

fontFamily: 'HelveticaNeue-CondensedBold',
複製代碼

前提

全部字體文件都是資源而已。咱們只須要按照原生的形式，將資源引入以後，便可搞定。

0、前期處理

在根目錄下建立文件夾：assets/fonts/，將字體文件(*.ttf)放在這裏。

一、iOS 引入字體

將根目錄下的 assets/ 文件夾引入到項目中。 選擇 ‘create group’，選中須要引入的 target。

在 target 對應的 Info.plist 中加入：

<key>UIAppFonts</key>
  <array>
    <string>HelveticaNeue-CondensedBold.TTF</string>
  </array>
複製代碼

最終在 Info.plist 中顯示爲：

到這裏，iOS 的引入就完成了。構建 iOS 包以後，能夠使用 fontFamily 了~

小技巧： 在 Appdelegate.m 中加入下面代碼，能夠查看如今 iOS 支持的全部字體。

NSInteger totalCount = 0;
  for (NSString *familyName in [UIFont familyNames]) {
    NSArray *familyNameArr = [UIFont fontNamesForFamilyName:familyName];
    NSLog(@"familyName:%@ count=%ld", familyName,[familyNameArr count]);
    NSInteger tempCount = [familyNameArr count];
    totalCount += tempCount;
    for (NSString *fontName in familyNameArr) {
      NSLog(@"++++ %@", fontName);
    }
  }
  NSLog(@"totalCount=%ld",totalCount);
複製代碼

二、android 引入字體

在 app/build.gradle 中配置 assets/ 的來源：

P.S.: 注意本身以前的 assets/ 來源。我以前是特意配置過的。因此直接加紅框字體便可。

到這裏，android 的引入就完成了。構建 android 包以後，能夠使用 fontFamily 了~