react-native android fontFamily不生效

Question

问题 1：

我在index.android.js的欢迎样式中添加了一个fontFamily，但是没有效果。 fontFamily 是否真的适用于 android？

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

问题 2：

如果 fontFamily 适用于 android，有没有办法从资产中加载自定义字体？或者这是react-native要实现的一些功能？

Answer 1

此功能尚未实现。请参阅 github here 上的相关问题。

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

我认为以下是比此处已说明的方法更简洁的替代方法：

将所有字体放入 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 6

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

我想尽一切办法写：

将你的字体文件放入 projectfolder/android/app/src/main/assets/fonts/ElMessiri-Regular.ttf
记得重新编译就是：react-native 运行-android 然后
您可以在您的样式中使用 fontFamily: 'ElMessiri-Regular'。

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

Answer 7

仅针对 iOS 的问题 - 有时无法正确识别 fontFamily 名称：

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

（确保仅在添加 assets/fonts 和运行后才执行以下步骤 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

即使听从了我找到的所有建议，我也很难过。

对我有用的方法：确保字体文件仅使用小写字母和下划线命名。再link。完成。

对此进行了大量的讨论，但据我所知，没有任何地方提到它。

react-native android fontFamily不生效

react-native android fontFamily does not take effect

android

react-native

问题 1：

问题 2：

仅针对 iOS 的问题 - 有时无法正确识别 fontFamily 名称：