使用react-native-svg-uri时SVG无法呈现

Question

环境信息

反应本机信息输出：

"react": "16.8.6",
"react-native": "0.60.4"

库版本：1.2.3

复制步骤

1. 使用react-native-cli创建一个新项目。
2. 将SVG文件放入项目的src文件夹中（我下载并使用了react-native-svg-uri文档中提到的荷马·辛普森图像进行测试）。
3. 将svg导入为import MySVG from './mysvg.svg';
4. 将MySVG传递到svgXmlData组件的SvgUri属性中

预期的行为

图像应在屏幕上呈现

可复制的示例代码

import React from 'react';
import SvgUri from 'react-native-svg-uri';

import MySVG from './mysvg.svg';

const MyComponent = () => {
  return (
     <>
      <SvgUri
        svgXmlData={MySVG}
        width="25"
        height="25"
      />
    </>
  );
};

export default MyComponent;

错误消息

Answer 1

如果您声明了svg文件且未使用uri，我建议您使用react-native-community（https://github.com/react-native-community/react-native-svg）中的react-native-svg项目

通过此操作，您可以将svg文件转换为React无状态组件（翻译非常简单），并且可以将其用作标准React组件。

Answer 2

您可以尝试执行此直接路径声明

<SvgUri
        width="25"
        height="25"
        source={require('./mysvg.svg')} />