使用 'react-native-svg' 库显示 SVG 图像，但在 iOS 中遇到 'Unrecognized font family' 错误（Android 工作正常。）

Question

我的 react-native 版本是“0.62.2”。

为了显示远程 SVG 图像，我在我的 React Native 项目中使用了 react-native-svg 库。

我这样用：

import {SvgUri} from 'react-native-svg';

const MyScreen = ({route, navigation}) => {
  ...
  ...
  return (<View>
        <SvgUri width="100%" height="100%" uri={imageSource} />
        </View>)
}

export default MyScreen;

在Android模拟器中，它工作正常！

在iOS中，它在某种意义上是有效的，但它的工作方式是：导航到MyScreen时，我总是遇到以下情况第一名运行时错误：

然后，我必须再次按下键盘上的 ctrl+S 来保存代码（虽然不需要保存），这会触发模拟器刷新，然后 MyScreen 成功显示 SVG 图像。

为什么我在 iOS 中的运行时出现“无法识别的字体系列 'Univers-Condensed'”错误？如何摆脱它？

（在我的代码中，我没有使用该字体的代码，所以我猜测是库引入了该字体。）

Answer 1

你能试试在 info.plist

中添加 Universe-Condensed.ttf

<key>UIAppFonts</key>
    <array>
        <string>Universe-Condensed.ttf</string>
    </array>

Answer 2

This happens when your app is trying to access the given font family and that specific font is not linked with your project 并且此错误只能在单个平台（Android、IOS）上发生，因为这些字体 link 在两个平台上分开编辑。

解法：

删除 JS 代码中 Univers-Condensed 字体系列的使用，因为 JS 代码是此错误的触发点。

注意：如果此错误是由您在项目中使用的某些库产生的并且正在使用 Univers-Condensed 字体系列，则此解决方案将不起作用。

另一个解决方案是，您必须在您的项目中添加并 link 这个字体系列。

Download the font .ttf file

创建一个名为 assets 的文件夹，在 assets 文件夹中创建字体项目根目录下的文件夹，并将下载的字体文件放入其中。

将此添加到您的 react-native.config.js file

 module.exports = {
 assets: ['./assets/fonts/']
  };

运行 react-native link

此过程也会自动为您的 IOS 和 android 项目添加 link 字体。

使用 'react-native-svg' 库显示 SVG 图像，但在 iOS 中遇到 'Unrecognized font family' 错误（Android 工作正常。）

Showing SVG image with 'react-native-svg' library, however encounter 'Unrecognized font family' error in iOS (Android works fine.)

react-native

svg

react-native-ios

react-native-svg