在React-Native中使用custom-font

Question

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

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

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

Answer 1

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

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

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

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

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

   • 即如果字体文件名是OpenSans-ExtraBold.ttf,则该值应为该项的值.

6. 要在React Native中使用该字体,只需设置fontFamily元素的style属性(请参阅此内容).请注意,样式应使用字体的名称而不是文件名.

   • 例如,在上面的例子中,style属性将是 fontFamily: 'Open Sans'

7. 运行Shift + Command + K清除最后一次构建

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

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

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

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

希望能帮助到你!

Answer 2

UPDATE

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

阿卡什的答案是正确的.

方法:

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

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

3. 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"]
  }

3. 我在终端跑

反应本地链接

4. 我在反复原生的Text元素中使用它,如下所示:(在第一个<之后没有空格而在最后一个之前没有空格>)

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

图片: package.json链接

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

Answer 4

这是因为iOS默认情况下没有Roboto字体.

究竟.要使它可用,您必须将它包含在Xcode的项目中.只需按照这个答案提供的步骤,它就非常简单.

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

Answer 5

很多答案都在这里 反应本机版本 < 0.60 的

对于那些使用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命令之前确保你有正确的字体文件夹路径