React Native 项目中添加字体的故障排除

Question

我正在尝试将一些自定义字体添加到我的React Native项目中。我将字体文件放在/fonts文件夹中，并将以下代码片段添加到package.json文件中：

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

然后我运行了react-native link，在Android上可以使用这些字体，一切都很好。

但问题出现在iOS上。于是，我阅读了所有关于这个问题的stackoverflow问题，但没有解决方案适用于我。我已经：

1. 确保它们包含在目标中。在目标成员资格框中，我的项目名称旁边的复选框被选中。

2. 再次检查我的字体是否作为资源包含在我的捆绑包中。

3. 将字体包含在应用程序plist中。 这前三步骤已经由react-native link正确完成。

4. 清理项目并重新构建。

5. 关闭打包器，然后重新运行项目。

仍然不能使用字体。因此，我将以下代码片段添加到我的appDelegate.m中：

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

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

这段代码会将所有可用的字体名称打印到xCode的日志中。似乎我只能使用Graphik-Medium字体：

在列表中，Graphik Web字体出现了，但字体名称已经混乱不堪：

bebas-neue在此列表中找不到。

有人知道我做错了什么吗？这些字体是否与iOS不兼容？

- Joseph Fakelastname

---

我曾经遇到过一个问题，就是在Xcode中的字体不是文件名所指定的，而是文件内容声明的字体名称。 - BradByte

我最终通过使用.otf文件而不是.ttf文件来解决了这个问题。 - Joseph Fakelastname

Answer 1

这是我们如何让自定义字体在iOS/Android上运行的步骤，希望对你有所帮助。首先删除node_modules，清除模拟器历史记录，删除iOS的build文件夹。然后我们手动将字体（包括.otf和.ttf格式）放入android/app/src/main/assets/fonts和ios文件夹中。接着在XCode中，确保它们在Info.plist的“应用程序提供的字体”部分中，然后在“构建阶段”的“复制Bundle资源”部分中确认它们也在其中。如果需要更新字体，我们会在此部分中删除并重新安装它们。最后，如果你重新安装所有内容，就应该可以正常工作了。希望这可以帮到你！

- Sara Inés Calderón