android - 为什么我在运行 react-native 链接时收到无法读取属性 `UIAppFonts of null` 错误？

Question

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

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

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

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

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

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:

Answer 1

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

例子.,

应用程序.json

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

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

运行 react-native 链接