在 React-Native 中使用自定义字体

Question

我想在我的应用中使用自定义字体，但我总是收到错误

[RCTLog][tid:0x78f70450][RCTConvert.m:581]>Unrecognized font family 'Roboto'

这是否意味着我必须弄乱 iOS 的直接导入字体的方式？

Answer 1

那是因为iOS 默认情况下没有可用的 Roboto 字体。

没错。要使其可用，您必须将其包含在 Xcode 的项目中。只需按照此答案提供的 steps 即可，非常简单。

一旦你完成了这个，那么你在 JS 中使用它应该没有问题。

Answer 2

在您的 Xcode 项目中创建一个新的字体组
将字体从 Finder 拖放到您刚刚创建的字体组中，然后在添加到目标列表中检查您的项目名称
在项目的主目录中展开项目名称文件夹并打开 Info.plist
添加Fonts provided by application作为新密钥
在 Fonts provided by application 下添加一个新项目，并将项目值设置为完整的字体名称以及您添加到字体文件夹中的每种字体的扩展名
- 即如果字体文件名是 OpenSans-ExtraBold.ttf，那么它应该是项目的值。
要在 React Native 中使用字体，只需为元素设置 fontFamily 样式属性（参见 this）。请注意，样式应使用字体的 name 而不是文件名。
- 例如在上面的示例中，样式属性将为 fontFamily: 'Open Sans'
运行 Shift + Command + K 清除上次构建
然后Command + B开始新的构建
最后 Command + R 到运行应用程序

如果您仍然看到错误无法识别的字体系列，请重新启动您的 React 打包程序。

https://github.com/alucic/react-native-cheat-sheet

希望对您有所帮助！

Answer 3

更新

您现在不需要手动安装 rnpm。在第一步之后，在第二步中，您只需使用命令 react-native link 即可链接所有资产。 rnpm 现在正在与 react-naitve 合并。在 RN https://github.com/facebook/react-native/commit/e8b508144fdcdea436cf4d80d99daec757505c70

上检查此提交

通过 `rnpm 做事有一种更简单的方法。它将字体添加到 android 和 ios。将要添加的字体放在项目目录中的合适位置。在您的 package.json 中只需添加以下内容：

第一步

...
    "rnpm": {
          "assets": ["path/to/your/font/directory"]
    },
...

步骤2

然后从命令行执行：rnpm link

您现在可以愉快地在您的应用中使用您的字体了。

注意：您必须安装 rnpm 才能工作。只要做 npm install -g rnpm

这是文档：https://github.com/rnpm/rnpm#advanced-usage

Answer 4

Aakash 的回答是正确的。

方法：

将字体添加到 react-native 项目的文件夹中
添加到package.json以下

 "rnpm": {
    "assets": ["./your/fonts/folder"]
  }

运行 react-native link 在您的终端

可选：

使用 npm install -g rnpm
运行 rnpm link

用法示例

我把myFont.ttf放在一个文件夹中，其路径（相对于package.json）是 ./src/assets/fonts
我把下面的代码放在package.json文件里

  "rnpm": {
    "assets": ["./src/assets/fonts"]
  }

我在终端运行

react-native link

我像这样在 react-native 的文本元素中使用它：（在第一个 < 之后没有 space 并且在最后一个 > 之前没有 space ）

< Text style={{ fontFamily: myFont }}> Hello MyFont! < /Text >

图片数： package.json link

感谢 Aakash 的精彩回答，希望您不介意像我这样的新手再次崩溃！

Answer 5

如果您正在使用 Create React Native App，当运行 react-native link 您将看到：

react-native link can not be used in Create React Native App projects. If you need to include a library that relies on custom native code, you might have to eject first. See https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md for more information.

如果您只想添加自定义字体，而不是弹出，您可以使用 Expo，它也默认包含在 CRNA 中。本质上，你这样做：

await Font.loadAsync({
  'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
});

此外，您只能使用ttf或otf格式的字体，不能使用ttc字体：https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app

这是来自 Expo 的详细文档：https://docs.expo.io/versions/latest/guides/using-custom-fonts

Answer 6

react-native 版本 < 0.60

有很多答案

对于使用 react-native version > 0.60 的用户，'rnpm' is deprecated 和自定义字体将无法使用。

现在，要在 > 0.60 的 react-native 版本中添加自定义字体，您必须：

1- 在项目的根文件夹中创建一个名为 react-native.config.js 的文件。

2- 在那个新文件中添加这个

module.exports = {
  assets: ['./assets/fonts/']
};

3- 运行 react-native link 根项目路径中的命令。

PS 在运行ning react-native link 命令

之前确保字体文件夹的路径正确

Answer 7

在 root/assets/font 文件夹中添加字体文件（即 .otf 或 .ttf）你的项目。
在package.json中： rnpm: "assets": ["./assets/font"],
1. 如果构建后您的字体不受支持，则在根级别添加这个文件：

反应-native.config.js

 module.exports = {
    project: {
        ios: {},
        android: {},
    },
    assets: ['./assets/fonts']
    };

ex: 字体名称 -> Robotto-Regular.ttf 然后在样式中像下面这样使用它：

fontFamily: 'Robotto-Regular'

运行 react-native link
然后在android端（android工作室）和ios端（Xcode）同步项目。
运行 react-native 运行-android 或 react-native 运行-ios

这应该可以解决因字体不支持而导致的任何错误，您可以使用自定义字体。

Answer 8

创建一个文件，即 defaultconfig.js

并在此文件中添加字体，然后使用

在 fontfamily:''montoface

的小部件中

在 React-Native 中使用自定义字体

Use custom-font in React-Native

react-native

更新

第一步

步骤2