react-native android fontFamily 不生效

Question

问题 1：

我在 index.android.js 的欢迎样式中添加了一个 fontFamily，但是没有任何效果。 fontFamily 真的可以在安卓上使用吗？

欢迎：{ fontSize:20, fontFamily:'roboto-thin', textAlign:'center', margin:10}

问题2：

如果 fontFamily 在 android 上工作，有没有办法从资产加载自定义字体？ 或者这是由 react-native 实现的一些功能？

Answer 1

对于 Android：使用 0.16.0-rc 添加了自定义字体。 所以你首先需要有 0.16.0-rc 版本，然后你可以从网上下载任何字体。

1. 把你的字体文件放在 projectfolder/android/app/src/main/assets/fonts/font_name.ttf
2. 记得重新编译它是： react-native run-android
3. 然后你可以在你的风格中使用fontFamily: 'font_name' 。

Answer 2

另请注意 react-native 中自定义 Android 字体的以下限制：

• 字体必须放在android/app/src/main/assets/fonts
• 仅支持.ttf文件
• 文件名必须与fontFamily完全匹配。 例如，如果fontFamily是'Source Sans Pro' ，则该文件必须命名为Source Sans Pro.ttf （而不是SourceSansPro.ttf ）。 以下段落中提到的任何后缀都会自动从文件中删除。
• 当字体为粗体和/或斜体时，它必须用于以下后缀：
  • _bold （例如Source Sans Pro_bold.ttf ）
  • _italic
  • _bold_italic

Answer 3

我相信以下是这里已经解释的方法的更干净的替代方法：

将所有字体放在 React-Native 项目目录中

./assets/fonts/

在 package.json 中添加以下行

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

最后从您的项目目录在终端中运行

$ react-native link

在您的样式中使用它以这种方式声明

fontFamily: 'your-font-name without extension'

如果你的字体是Raleway-Bold.ttf那么，

fontFamily: 'Raleway-Bold'

---

来源https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4

Answer 4

你好这个问题腰对我来说超过两天了“El+Messiri”字体“ https://fonts.google.com/specimen/El+Messiri ”

我正在做每一个思考写：

1. 将您的字体文件放在 projectfolder/android/app/src/main/assets/fonts/ElMessiri-Regular.ttf
2. 记得重新编译它是： react-native run-android 然后

3. 您可以在您的风格中使用 fontFamily: 'ElMessiri-Regular'。

   但错误在于我在fontFamily: 'ElMessiri-Regular '之后使用了fontWeight : 'bold'并且 fontWeight 覆盖了 fontFamily 因为“El+Messiri”字体有他自己的 fontFamily 粗体，即“ElMessiri-Bold”

Answer 5

此功能尚未实现。 在此处查看 github 上的相关问题。

Answer 6

似乎添加了自定义字体，请查看此提交：

https://github.com/facebook/react-native/commit/bfeaa6a4f531cfc18c097bc9ffb6a8dbe3ddc702

Answer 7

对于那些仅在 iOS 上遇到问题的人 - 有时无法正确识别 fontFamily 名称：

解决我的问题的唯一解决方案是记录所有字体以找出正确的命名

（确保仅在添加资产/字体并运行react-native link后才执行以下步骤）：

无论如何，要记录它们，请使用 xcode 打开appName.xcworkspace文件，然后编辑 AppDelegate.m 将此行放在didFinishLaunchingWithOptions方法的末尾（以及 return 语句之前）：

for (NSString* family in [UIFont familyNames])
  {
    NSLog(@"%@", family);
    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
      NSLog(@" %@", name);
    }
  }

因此，当您运行应用程序（来自 xcode）时，它会输出如下内容：

这样，我可以在 react-native 样式中使用 fontFamily Barow-Light或Zapfino

希望有帮助！

Answer 8

即使遵循了我找到的所有建议，我也为此感到非常困难。

对我有用的方法：确保仅使用小写字母和下划线命名字体文件。 重新链接。 完毕。

已经为此进行了大量的头发拉扯，但据我所知，在任何地方都没有提及。