首页 > 解决方案 > React Native 60 中出现无法识别的字体系列错误

问题描述

这是错误的屏幕截图

在此处输入图像描述

react-native.config.js 文件

module.exports = {
    project: {
        ios: {},
        android: {},
    },
    assets: ["./assets/fonts"]
};

在此处输入图像描述

我试图直接通过 XCode 工作,但同样

资源文件夹中的字体以及复制捆绑资源中的字体

在此处输入图像描述

它也存在于应用程序提供的字体中的 Info.plist 中

在此处输入图像描述

我多次确认一切,但总是触发这个错误

标签: iosxcodereact-native

解决方案


按照这些简单的步骤将自定义字体添加到您的应用程序

  1. 将您想要的所有字体文件添加到react-native 项目根目录中的assets/fonts文件夹中

    在此处输入图像描述

  2. 对于React-Native Version < 0.60,我们需要告诉 react-native 我们的自定义字体所在的位置。我们通过将 rnpm 添加到package.json来提供字体文件的路径来做到这一点

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

    对于React-Native 版本 > 0.60,我们需要创建一个文件“react-native.config.js”并添加

    module.exports = { project: { ios: {}, android: {} }, assets: ['./assets/fonts/'] };

  3. 如果npm version > 5运行这个命令npx react-native link
    如果npm version < 5运行这个命令react-native link

这应该在 iOS 的 Info.plist 文件中添加字体引用,在 Android 上将字体文件复制到android/app/src/main/assets/fonts。您可以通过从 iOS 文件夹中打开 Info.plist 并查找UIAppFonts密钥来验证这一点


推荐阅读