React Native Unrecognized 字体系列未修复

Posted 2023-03-15

【中文标题】React Native Unrecognized 字体系列未修复

【英文标题】：React Native Unrecognized font family not fixing

【发布时间】：2018-10-18 18:55:23

【问题描述】：

字体在我的资产文件夹中，它们也在 xcode 复制包资源中，也在资源文件夹中。我也已经运行了 react-native 链接，但它仍然找不到字体。有什么我错过的吗？请参阅附图以供参考：

在此处输入图片说明

【问题讨论】：

字体名称不是文件名。尝试使用Grobold 作为名称或使用BirdFont 之类的应用程序来查找real 名称

【参考方案1】：

React Native 部分：

将字体添加到react-native项目的根文件夹的assets/fonts

react-native-project/
  package.json
  ios/
  android/
  assets/
    fonts/
      GROBOLD...
      ...

将下面的sn-p添加到package.json

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

在您的 react-native 项目中运行以下命令以链接您的资产。

react-native link react-native-vector-icons 

iOS 部分：

检查info.plist的字体文件是否已经添加。

删除派生数据，构建并运行您的 Xcode 项目。

通过导航到AppDelegate.m 文件并在NSURL *jsCodeLocation 下方添加这些代码行来仔细检查添加到项目的字体；

for (NSString* family in [UIFont familyNames])

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

Android 部分：

如果字体文件不存在，请将其复制到。

android/
    app/
      src/
        main/
          assets/
            fonts/
              GROBOLD...

【讨论】：

@Vince Gonzales，我已经更新了我的答案。它完美地为我工作。如上所示，逐步进行以获得更好的结果。如果您遇到任何问题，请告诉我。

for (NSString* family in [UIFont familyNames]) NSLog(@"%@", family); for (NSString* name in [UIFont fontNamesForFamilyName: family]) NSLog(@" %@", name); ，我该如何运行它以及在哪里可以检查此代码的输出？

从 根文件夹 -> ios -> project.xcodeproj 运行 Xcode 项目。此外，您可以在 Xcode 的调试控制台中查看日志。

谢谢！我会尝试一下，这个错误的奇怪之处在于我已经从我的朋友那里复制了整个 react native 项目，他也是一个 mac 用户，字体在他身上运行良好，只有我的会抛出这个错误。

【参考方案2】：

请在下方更新您的代码：

"rnpm": 
    "assets": [
      "./src/assets/fonts/"
    ]
  

您错过了“/”，这就是您的编译器找不到字体文件的原因。

如果您还有任何问题，请告诉我。

【参考方案3】：

'rnpm' 版本 > 0.60 已弃用，将在主要版本中完全删除。

请按照以下步骤开始在您的 React Native 应用中使用自定义字体

在根目录下创建react-native.config.js

在react-native.config.js中添加以下代码

module.exports = 
  assets: ['./assets/fonts']
;

在终端中，运行npx react-native link 命令

给组件添加样式e.g. <Text style=styles.titleText>Home Screen</Text>

在标题中添加以下属性 titleText: fontFamily: 'name-of-font-without-ttf-extension'

运行您的应用npx react-native run-android / run-ios

您将看到添加到您的应用中的新字体。