React Native 和字体变体答案

【问题标题】：React Native and font variantsReact Native 和字体变体
【发布时间】：2018-09-07 15:34:32
【问题描述】：

我创建了一个 React Native 应用程序，主要针对 iOS。我正在使用自定义字体，并且可以看到它们已通过 AppDelegate.m（在 XCode 中）中的一些调试成功集成到应用程序中：

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

导致：-

我的字体家族

MyFontFamilyFontOne

MyFontFamilyFontTwo

我的问题是访问元素中的特定字体 - 在使用系列或确切的字体名称时，我总是看到呈现相同的字体，例如

<Text style={{fontFamily: 'MyFontFamily'}}>hello</Text>
<Text style={{fontFamily: 'MyFontFamilyFontOne'}}>hello</Text>
<Text style={{fontFamily: 'MyFontFamilyFontTwo'}}>hello</Text>

以相同的字体呈现。

在 HTML 中输出相同的结果会产生所需的结果，例如字体一和二是不同的。

【问题讨论】：

如果您使用例如 AmericanTypewriter-Light 而不是您的自定义字体，它会运行吗？

标签： ios reactjs react-native fonts

【解决方案1】：

正如@Yanush 所说，已验证您已正确链接您的字体。使用自定义字体后，您必须设置 fontFamily、fontWeight 和 fontStyle

【讨论】：

一和二本质上是不同的字体，尽管它们是同一个家族。在 MacOS 字体册中查看它们时，它们在“MyFontFamily”下被列为“One”和“Two”。
我知道！！！但是没有问题！当你在 style 属性中使用 each 时，你必须设置 fontWeight 和 fontStyle 否则 react Native 会抛出错误。

【解决方案2】：

确保您已正确链接字体。 react native中链接字体的正确方法如下所述：

在您的项目目录下创建一个字体目录，例如：./assets/fonts
编辑 package.json 文件并添加以下行： “rnpm”：{ “资产”：[ “./app/assets/字体” ] }
链接字体：在您的项目目录中运行“react-native link”

【讨论】：