如何在反应原生上显示SVG文件？

Question

我想显示svg文件（我有一堆svg图像），但我找不到显示方式。我试图使用图像和使用 react-native-svg 的组件，但它们不起作用。我试图用原生方式做到这一点，但只显示svg图像真的很辛苦。

示例代码:

import Svg, {
  Use,
  Image,
} from 'react-native-svg';

<View>
  <Svg width="80" height="80">
     <Image href={require('./svg/1f604.svg')} />
  </SvgRn>
</View>

另外，我知道反应原生基本上不支持svg，但我认为有人用棘手的方式解决了这个问题（有/没有反应原生-svg）

Answer 1

安装react native svg变压器

npm i react-native-svg-transformer --save-dev

我使用SVG如下，它工作正常

import LOGOSVG from "assets/svg/logo.svg"

渲染中

<View>
  <LOGOSVG 
    width="100%"
    height="70%"
  />
</View>

Answer 2

我在这里发布了另一个解决方案（react-native-vate-icons）。这种方法使用矢量字体（来自SVG）而不是SVG文件。PS： react-native-vate-icons是在react-native-icons中处理SVG的最佳方法，它也适用于iOS和android。您将能够更改矢量图标的颜色和大小。

如果你想将svg直接插入你的应用程序，你可以尝试第三方库：react native svg。github拥有超过3k颗恒星，这是最好的方法之一。

使用 npm 安装其中任何一个：

• 反应原生svg
• 反应本机svg uri

然后使用将它链接到本机

react-native link react-native-svg

一个具有反应原生的例子：

import * as React from 'react';
import SvgUri from 'react-native-svg-uri'; // SVG Package
import testSvg from './test.svg';          // SVG File

export default () => (
  <SvgUri
    width="200"
    height="200"
    svgXmlData={testSvg}
  />
);

Answer 3

我使用了以下解决方案:

1. 使用https://svg2jsx.herokuapp.com/将. svg图像转换为JSX
2. 使用https://react-svgr.com/playground/?native=true将JSX转换为react-native-svg组件（确保选中React Native复选框）