React Native 自定义字体配置

283 阅读1分钟

网上搜了一圈方法步骤都有,就是没有一个能成功的,本文在其基础上,补充几个遇到的坑。。。

先看步骤

  1. 下载字体 xxx.ttf;
  2. 在项目根目录创建文件夹 assets/fonts, 并将 xxx.ttf 放入;
  3. package.json 中配置资源目录如下:
{
    // "dependencies": {}, 参照物
    "rnpm": {
        "assets": [
    	    "./assets/fonts/"
        ]
    }
}
  1. 在终端项目根目录中运行 react-native link
  2. 现在就可以使用 fontFamily: 'xxx'

  1. 下载的字体文件请先使用工具查看下字体的名称及确认下字体文件是否有损坏。字体文件名最好和Mac 自带的字体册工具中 PostScript 名称保持一致(如:QXyingbixing.ttf),fontFamily 使用 PostScript 名称(如:QXyingbixing)。有损坏的字体可能会有部分字无法按预期字体展示。
    Mac 自带的字体册
  2. 添加新字体后,需要重新 build 才会生效