如何在 React Native 上显示 SVG 文件？

javascript react-native svg

2022-08-30 02:07:39

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

示例代码：

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

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

我也知道 react native 基本上不支持 svg，但我认为有人用棘手的方式解决了这个问题（有/没有 react-native-svg）

答案 1

我使用了以下解决方案：

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

答案 2

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

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

使用以下命令安装其中任何一个：npm

然后将其链接到本机使用

react-native link react-native-svg

React-native-svg-uri 的一个例子：

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}
  />
);