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 了~