36

我想在我的应用程序中使用自定义字体，但我不断收到错误消息

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

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

4

8 回答 8

39

  1. 在 Xcode 项目中创建一个新组 Fonts

  2. 将字体从 Finder 拖放到您刚刚创建的 Fonts 组中，并在 Add to targets 列表中检查您的项目名称

  3. 在项目的主目录中展开项目名称文件夹并打开 Info.plist

  4. 添加Fonts provided by application为新密钥

  5. 在 下添加一个新项目Fonts provided by application，并将项目值设置为完整的字体名称，并为您添加到字体文件夹的每种字体提供扩展名

    • 即如果字体文件名是OpenSans-ExtraBold.ttf，那么这应该是项目的值。

  6. 要在 React Native 中使用字体，只需fontFamily为元素设置 style 属性（请参阅this）。请注意，样式应使用字体名称而不是文件名。

    • 例如，在上面的示例中，样式属性将是fontFamily: 'Open Sans'

  7. 运行 Shift + Command + K 清理最后一个构建

  8. 然后 Command + B 开始一个新的构建

  9. 最后是 Command + R 运行应用程序

如果您仍然看到错误 Unrecognized font family 重新启动您的反应打包程序。

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

希望能帮助到你！

于 2015-05-30T00:20:51.863 回答
32

更新

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

通过 `rnpm. 它将字体添加到 android 和 ios。将要添加的字体放在项目目录中的合适位置。在您的 package.json 中添加以下内容：

步骤1

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

第2步

然后从命令行执行：rnpm link

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

注意：您必须安装 rnpm 才能使用。做就是了npm install -g rnpm

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

于 2016-07-22T02:38:27.243 回答
23

Aakash 的回答是正确的。

方法：

  1. 将字体添加到 react-native 项目的文件夹中
  2. 将以下内容添加到 package.json
 "rnpm": {
    "assets": ["./your/fonts/folder"]
  }
  1. react-native link在您的终端中运行

可选：

  1. 添加 rnpm 使用npm install -g rnpm
  2. 跑rnpm link

示例用法

  1. 我将 myFont.ttf 放在路径（相对于 package.json）为 ./src/assets/fonts 的文件夹中
  2. 我将以下代码放在 package.json 文件中
  "rnpm": {
    "assets": ["./src/assets/fonts"]
  }
  1. 我在终端运行

反应原生链接

  1. 我在 react-native 的 Text 元素中使用它，如下所示：（第一个 < 之后没有空格，最后一个 > 之前没有空格）

<Text style={{ fontFamily: myFont }}> 你好MyFont！</文>

图片： package.json 链接

感谢 Aakash 的出色回答，希望您不介意像我这样的菜鸟再次崩溃！

于 2016-12-24T01:42:19.657 回答
21

这是因为 iOS 默认没有提供 Roboto 字体。

确切地。要使其可用，您必须从 Xcode 将其包含在您的项目中。只需按照此答案提供的步骤进行操作，这非常简单。

完成此操作后，从 JS 使用它应该没有问题。

于 2015-03-31T12:14:51.213 回答
5

对于react-native 版本 < 0.60，这里有很多答案

对于那些使用react-native version > 0.60的用户，'rnpm' is deprecated自定义字体将不起作用。

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

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

2-将其添加到该新文件中

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

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

PSreact-native link在运行命令之前确保你有正确的字体文件夹路径

于 2019-08-02T06:32:30.737 回答
0

创建一个文件，即 defaultconfig.js

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

在小部件中fontfamily:''montoface

于 2020-09-06T06:53:14.393 回答
0

如果你使用 Create React Native App，运行时react-native link你会看到：

react-native link不能在 Create React Native App 项目中使用。如果您需要包含依赖于自定义本机代码的库，则可能必须先弹出。有关更多信息，请参阅 https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md 。

如果您要做的只是添加自定义字体，而不是弹出，您可以使用 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

于 2018-03-31T04:16:18.993 回答
0

  1. 在项目的 root/assets/font 文件夹中添加字体文件（即.otf或.ttf）。

  2. 在package.json : rnpm: "assets": ["./assets/font"],

    1. 如果在构建您的字体后不受支持，则在根级别添加这个文件：

react-native.config.js

 module.exports = {
    project: {
        ios: {},
        android: {},
    },
    assets: ['./assets/fonts']
    };
  1. 例如： font-name -> Robotto-Regular.ttf 然后在样式中使用它，如下所示：
fontFamily: 'Robotto-Regular'
  1. 运行反应原生链接
  2. 然后在android端（android studio）和ios端（Xcode）同步项目。
  3. 运行react-native run-android或react-native run-ios

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

于 2019-08-29T06:35:04.947 回答