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

Question

我想在我的应用程序中使用自定义字体，但一直出错

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

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

Answer 1

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

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

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

Answer 2

1. 在您的 Xcode 项目中创建一个新的组字体

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

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

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

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

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

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

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

7. 运行 Shift + Command + K 以清理上次构建

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

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

如果你仍然看到错误 Unrecognized font family 重启你的 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 中添加以下内容：

步骤1

...
    "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 的回答是正确的。

方法：

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

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

1. 在终端中运行react-native link

可选：

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

使用示例

1. 我将 myFont.ttf 放在一个文件夹中，其路径（相对于 package.json）为 ./src/assets/fonts
2. 我将以下代码放入 package.json 文件中

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

1. 我在终端运行

反应原生链接

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

你好我的字体！ 文>

图片： package.json link

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

Answer 5

如果你使用 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

Answer 6

react-native 版本

有很多答案

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

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

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

2- 在新文件中添加这个

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

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

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

Answer 7

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']
    };

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

fontFamily: 'Robotto-Regular'

5. 运行 react-native 链接
6. 然后在android端（android studio）和ios端（Xcode）同步项目。
7. 运行 react-native run-android 或 react-native run-ios

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

Answer 8

创建一个文件，即 defaultconfig.js

在这个文件中添加字体然后使用

在fontfamily:''montoface 的小部件中