react-native 引入、添加、使用自定义字体

最终目的

在 react-native 中，可以对 使用形如下面的配置而不报错：

fontFamily: 'HelveticaNeue-CondensedBold',
复制代码

前提

所有字体文件都是资源而已。我们只需要按照原生的形式，将资源引入之后，即可搞定。

0、前期处理

在根目录下创建文件夹：assets/fonts/，将字体文件(*.ttf)放在这里。

1、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);
复制代码

2、android 引入字体

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

P.S.: 注意自己之前的 assets/ 来源。我之前是特地配置过的。所以直接加红框字体即可。

到这里，android 的引入就完成了。构建 android 包之后，可以使用 fontFamily 了~