使用 react-native-svg-uri 时 SVG 不呈现答案

【问题标题】：SVG not rendering when using react-native-svg-uri使用 react-native-svg-uri 时 SVG 不呈现
【发布时间】：2019-12-16 00:50:48
【问题描述】：

环境信息

反应原生信息输出：

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

库版本：1.2.3

复制步骤

使用 react-native-cli 创建一个新项目。
将 SVG 文件引入项目的 src 文件夹（我下载并使用了 react-native-svg-uri 文档中提到的 homer simpson 图像进行测试）。
将 svg 导入为 import MySVG from './mysvg.svg';
将MySVG 传递给SvgUri 组件的svgXmlData 属性

预期行为

图像应该呈现在屏幕上

可重现的示例代码

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;

错误信息

【问题讨论】：

我不知道怎么做，但是在一遍又一遍地重复同样的事情之后，它终于起作用了。

标签： reactjs react-native svg react-native-svg

【解决方案1】：

你可以试试这个直接路径声明

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

【讨论】：

【解决方案2】：

如果您声明了一个 svg 文件而不使用 uri，我建议您使用 react-native-community (https://github.com/react-native-community/react-native-svg) 中的 react-native-svg 项目

有了这个，你可以把你的 svg 文件变成一个 React 无状态组件（翻译很简单），你可以把它当作一个标准的 React 组件来使用。

【讨论】：