更新

Question

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

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

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

Answer 1

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

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

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

希望它有所帮助！

Answer 2

更新

您现在不需要手动安装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 3

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 link

我在反复原生的Text元素中使用它，如下所示：（没有第一个＆lt;之后的空格而没有前一个＆gt;之前的空格）

＆LT;文字样式= {{fontFamily：myFont}}＆gt;您好MyFont！＆LT; /文字＆gt;

图片： package.json link

感谢Aakash给出了很好的答案，希望你不要介意像我一样在那里重新点击！

Answer 4

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

完全。要使它可用，您必须将它包含在Xcode的项目中。只需按照此答案提供的steps，即可。

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

Answer 5

许多答案针对本机版本<0.60

对于使用本机版本> 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 6

如果您使用的是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

以下是来自世博会的详细文档：https://docs.expo.io/versions/latest/guides/using-custom-fonts

Answer 7

在项目的根/资产/字体文件夹中添加字体文件（即 .otf 或 .ttf ）。

package.json

： rnpm：“资产”：[“ ./assets/font”]，
1. 如果不支持构建字体后，请在根级别添加此文件：

react-native.config.js

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

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

fontFamily: 'Robotto-Regular'

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

这应该解决字体不支持会出现的所有错误，并且您可以使用自定义字体。

Answer 8

创建一个文件，即defaultconfig.js

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

在fontfamily:''montoface的小部件中

在React-Native中使用custom-font

8 个答案:

更新

步骤1

步骤2