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

Posted 2023-02-16

【中文标题】在 React-Native 中使用自定义字体

【英文标题】：Use custom-font in React-Native

【发布时间】：2015-06-01 09:07:11

【问题描述】：

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

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

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

【参考方案1】：

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

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

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

【讨论】：

只需在项目文件夹的控制台中运行react-native link。适用于 android 和 iOS

@aakash-sidgel 的回答要容易得多

【参考方案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 来运行应用程序

如果你仍然看到错误 Unrecognized font family 重启你的 react 打包器。

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

希望对你有帮助！

【讨论】：

OH 第 10 步。重新启动反应打包程序完成了工作。谢谢:)

还需要将其添加到“复制捆绑资源”中。

我忘记附加'.ttf'后缀了... THX！

这也可以：right click Fonts and select "Add files to <project name>" 然后在 finder 上选择字体文件

所有答案都与在项目中预打包字体有关，任何在运行时动态下载字体并保存然后使用它的人。通常中文字体很大，会大大增加应用程序的大小。

【参考方案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

【讨论】：

既然 rnpm 被合并到 react-native 中，我应该直接从 react-native 做，对吗？

我没有测试过，但应该可以。测试后我会更新答案。 @AndréJunges

IOS 对我不起作用 - 我必须按照 @alucic 的回答中的步骤操作

我刚试了一下，它对我有用。你在运行 react-native 链接后重建了项目吗？您仍然需要通过将 rnpm 条目添加到 package.json 中。 @AndréJunges

这里缺少一个细节，react native 中的“fontFamily”应该是字体的名称，而不是字体文件的名称（在 Mac 上你可以在 Font Book 中打开字体查看字体名称，显示在标题栏中）

【参考方案4】：

Aakash 的回答是正确的。

方法：

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

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

在终端中运行react-native link

可选：

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

使用示例

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

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

我在终端运行

反应原生链接

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

你好我的字体！ 文>

图片： package.json link

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

【讨论】：

当我运行 react-native link 时，我在资产/字体中添加的字体会被自动删除，如何解决这个问题，因为字体仍然无法正常工作

嗨，我不确定发生了什么..您将字体准确放置在哪里？ （即我使用原子编辑器并将文件夹放在那里）。问题的快照可能有用吗？

它现在可以工作了，我只是在 /android/app/src/main/assets/fonts/ 下添加了它，然后避免在样式上使用fontWeight: 'bold'，因为它打破自定义字体使其无法正常工作。重新构建应用程序并完成。 :)

我应该导入字体吗？

我应该导入字体吗？

【参考方案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

【参考方案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命令之前确保你有正确的字体文件夹路径

【参考方案7】：

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

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

如果在构建字体后不支持，则在根级别添加此文件：

react-native.config.js

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

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

fontFamily: 'Robotto-Regular'

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

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

【参考方案8】：

创建一个文件，即 defaultconfig.js

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

在fontfamily:''montoface 的小部件中