3

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

  1. 卸载并重新安装 react-native
  2. 运行 react-native 升级
  3. 资产文件夹最初在我的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:
4

1 回答 1

4

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

<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 link

于 2021-03-21T10:12:42.023 回答