为什么我在运行 react-native 链接时收到无法读取属性 `UIAppFonts of null` 错误? [英] Why am I receiving a cannot read property `UIAppFonts of null` error when running react-native link?

问题描述

我正在尝试在 React Native 应用程序中实现自定义字体.我正在使用 react native web 并且可以看到在 web 上工作的自定义字体，但不是在 native 中.我正在开发一个 Android 应用程序，但问题似乎出在我什至没有使用的 IOS 文件夹中.我在 SO 上发现了 this 问题，但没有一个解决方案对我.我试过了:

I am trying to implement custom fonts in a react native application. I am using react native web and can see the custom fonts working on web but not in native. I am working on an Android app but the issues seems to be within the IOS folder which I'm not even using. I found this question on SO but none of the solutions have worked for me. I've tried:

1. 卸载和重新安装 react-native
2. 运行 react-native 升级
3. assets 文件夹原本在我的 src 文件夹中，所以我把它移到了项目的根目录

1. Uninstalling and reinstalling react-native
2. Running react-native upgrade
3. The assets folder was originally in my src folder so I moved it to the root of the project

我的字体位于项目根目录的 ./assets/fonts 中，它们是 otf 文件，文件名中没有连字符.我在我的项目的根目录中创建了一个 react-native.config.js 文件，这就是其中的内容:

My fonts are located in ./assets/fonts in the root of my project and they are otf files, there are no hyphens in the file names. I created a react-native.config.js file in the root of my project and this is what is in it:

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

当我运行 react-native link 这是我收到的错误:

When I run react-native link this is the error I'm receiving:

info Linking assets to ios project
warn Group 'Resources' does not exist in your Xcode project. We have created it automatically for you.
error Linking assets failed. Run CLI with --verbose flag for more details.
TypeError: Cannot read property 'UIAppFonts' of null
    at Object.linkAssetsIOS [as copyAssets] (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/@react-native-community/cli-platform-ios/build/link/copyAssets.js:89:31)
    at Object.keys.forEach.platform (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/@react-native-community/cli/build/commands/link/linkAssets.js:42:16)
    at Array.forEach (<anonymous>)
    at linkAssets (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/@react-native-community/cli/build/commands/link/linkAssets.js:33:32)
    at linkAll (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/@react-native-community/cli/build/commands/link/linkAll.js:96:31)
    at Object.link [as func] (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/@react-native-community/cli/build/commands/link/link.js:82:33)
    at Command.handleAction (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/@react-native-community/cli/build/index.js:186:23)
    at Command.listener (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/commander/index.js:315:8)
    at Command.emit (events.js:198:13)
    at Command.parseArgs (/Users/daniellemccarthy/linos-poc/voice/case-picking/node_modules/commander/index.js:651:12)

当我运行 react-native info 时显示:

System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 1.72 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.6 - /Users/daniellemccarthy/.sdkman/candidates/java/current/bin/javac
    Python: 3.7.3 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: ^4.8.0 => 4.8.0 
    react: ^16.9.0 => 16.13.1 
    react-native: ^0.62.2 => 0.62.2 
  npmGlobalPackages:

推荐答案

转到IOS文件夹>Info.plist 将此代码添加到 .plist 文件中

goto IOS folder > Info.plist add this code in .plist file

<plist version="1.0"> <dict>
<key>....</key> 
<!--this below code-->
<key>UIAppFonts</key>
<array>
    <string>Poppins-Bold.ttf</string>
    <string>Poppins-ExtraBold.ttf</string>
    <string>Poppins-Italic.ttf</string>
    <string>Poppins-Medium.ttf</string>
    <string>Poppins-MediumItalic.ttf</string>
    <string>Poppins-Regular.ttf</string>
    <string>Poppins-SemiBold.ttf</string>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Fontisto.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>Roboto_medium.ttf</string>
    <string>Roboto.ttf</string>
    <string>rubicon-icon-font.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Zocial.ttf</string>
</array>

并确保在 IOS 文件夹中有一个正确的名称 app.json

and make sure in the IOS folder you have a proper name as app.json

示例，

app.json

{
  "name": "<appname>",
  "displayName": "<appname>"
}

确保您在 IOS 文件夹中具有相同的名称

make sure you having the same name in the IOS folder

运行react-native 链接

这篇关于为什么我在运行 react-native 链接时收到无法读取属性 `UIAppFonts of null` 错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！