reactjs - 使用 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 文档中提到的 homer simpson 图像进行测试）。
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

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

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

Answer 2

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

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