React Native无法识别的字体家族未修复

时间:2018-10-18 18:55:23

标签: ios react-native

这些字体在我的资产文件夹中,它们也位于xcode副本捆绑资源中,也位于资源文件夹中。我也已经运行了react-native链接,但是它仍然找不到字体。有什么我想念的吗?请参阅所附图片以供参考:

enter image description here

在此处输入图片描述

enter image description here enter image description here

enter image description here

enter image description here

3 个答案:

答案 0 :(得分:5)

反应本机部分:

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

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

将以下代码段添加到package.json

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

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

react-native link react-native-vector-icons 

enter image description here

iOS部分:

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

enter image description here

删除派生数据,构建并运行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...

enter image description here

答案 1 :(得分:1)

请在下面更新您的代码:

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

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

让我知道您是否仍然遇到任何问题。

答案 2 :(得分:0)

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

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

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

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

    module.exports = {
      assets: ['./assets/fonts']
    };
    
  3. 在终端中,运行 npx react-native link 命令

  4. 为组件添加样式e.g. <Text style={styles.titleText}>Home Screen</Text>

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

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

  7. 您会看到新字体添加到您的应用中。