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

Question

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

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

我这样使用它:

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

当您的应用尝试访问给定的字体系列并且该特定字体未与您的项目链接时，就会发生这种情况并且此错误仅可能发生在单个平台(Android、IOS)上，因为这些字体在两个平台上单独链接。

解决方案:

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

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

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

• Download the font .ttf file

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

• 将其添加到您的 react-native.config.js 文件

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

• 运行react-native链接

此过程也会自动将字体与您的 IOS 和 Android 项目链接。