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

How to show SVG file on React Native?

提问by the_bluescreen

I want to show svg files (I have bunch of svg images) but the thing I couldn't find the way to show. I tried to use Imageand Usecomponents of react-native-svgbut they don't work with that. And I tried to do that with native way but it's really hard work to show just svg image.

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

Example code:

示例代码：

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

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

Also I know the react native doesn't support svg basically but I think someone fixed this problem with tricky way (with/without react-native-svg)

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

回答by Ihor Burlachenko

I used the following solution:

我使用了以下解决方案：

1. Convert .svgimage to JSX with https://svg2jsx.herokuapp.com/
2. Convert the JSX to react-native-svgcomponent with https://svgr.now.sh/(check the "React Native checkbox)

1. .svg使用https://svg2jsx.herokuapp.com/将图像转换为 JSX
2. react-native-svg使用https://svgr.now.sh/将 JSX 转换为组件（选中“React Native 复选框）”

回答by Cassio Seffrin

I posted another solution here Which is the best approach to insert an vector (svg) graph into a react native application, This approach use a vector font(from svg) instead a svg file. PS: Its works great in ios and android, and you also can change the color and size of your vector icon.

我在这里发布了另一个解决方案这是将矢量（svg）图插入到本机应用程序中的最佳方法，这种方法使用矢量字体（来自 svg）而不是 svg 文件。PS：它在 ios 和 android 中效果很好，您还可以更改矢量图标的颜色和大小。

If you want to insert a svg directly into your app, you can try a 3rd party library : react-native-svg. With more than 3k stars in github it's one of the best approach.

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

• install:
  • npm i react-native-svg
  • npm i react-native-svg-uri
• link the to native:
  • react-native link react-native-svg

• 安装：
  • npm i react-native-svg
  • npm i react-native-svg-uri
• 链接到本机：
  • 反应原生链接反应原生svg

And here's a sample:

这是一个示例：

import * as React from 'react';
import SvgUri from 'react-native-svg-uri';
import testSvg from './test.svg';
export default () => (
  <SvgUri
    width="200"
    height="200"
    svgXmlData={testSvg}
  />
);

回答by Amir Khorsandi

After trying many ways and libraries I decided to create a new font (with Glyphsor this tutorial) and add my SVG files to it, then use "Text" component with my custom font.

Hope this helps anyone that has the same problem with SVG in react-native.

在尝试了多种方法和库之后，我决定创建一个新字体（使用Glyphs或本教程）并将我的 SVG 文件添加到其中，然后使用“Text”组件和我的自定义字体。

希望这可以帮助任何在 react-native 中遇到 SVG 相同问题的人。

回答by AndroConsis

Install react-native-svg-transformer

安装react-native-svg-transformer

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

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

I'm using SVG as following and it works fine

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

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

in render

在渲染中

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

回答by Sledge Hammer

I had the same problem. I'm using this solution I found: React Native display SVG from a file

我有同样的问题。我正在使用我发现的这个解决方案：React Native display SVG from a file

It's not perfect, and i'm revisiting today, because it performs a lot worse on Android.

它并不完美，我今天重新审视，因为它在 Android 上的表现要差得多。

回答by Aravind Vemula

Use https://github.com/kristerkari/react-native-svg-transformer

使用https://github.com/kristerkari/react-native-svg-transformer

In this package it is mentioned that .svgfiles are not supported in React Native v0.57 and lower so use .svgxextension for svg files.

在这个包中提到.svg了 React Native v0.57 及更低版本不支持文件，所以使用.svgxsvg 文件的扩展名。

For web or react-native-web use https://www.npmjs.com/package/@svgr/webpack

对于 web 或 react-native-web 使用https://www.npmjs.com/package/@svgr/webpack

---

---

To render svg files using react-native-svg-uriwith react-native version 0.57 and lower, you need to add following files to your root project

要使用react-native-svg-urireact-native 0.57 及更低版本渲染 svg 文件，您需要将以下文件添加到您的根项目中

Note: change extension svgto svgx

注意：将扩展名更改svg为svgx

step 1: add file transformer.jsto project's root

第 1 步：将文件添加transformer.js到项目的根目录

// file: transformer.js

const cleanupSvg = require('./cleanup-svg');

const upstreamTransformer = require("metro/src/transformer");

// const typescriptTransformer = require("react-native-typescript-transformer");
// const typescriptExtensions = ["ts", "tsx"];

const svgExtensions = ["svgx"]

// function cleanUpSvg(text) {
//   text = text.replace(/width="([#0-9]+)px"/gi, "");
//    text = text.replace(/height="([#0-9]+)px"/gi, "");
//    return text;
// }

function fixRenderingBugs(content) {
  // content = cleanUpSvg(content); // cleanupSvg removes width and height attributes from svg
  return "module.exports = `" + content + "`";
}


module.exports.transform = function ({ src, filename, options }) {
  // if (typescriptExtensions.some(ext => filename.endsWith("." + ext))) {
  //  return typescriptTransformer.transform({ src, filename, options })
  // }

  if (svgExtensions.some(ext => filename.endsWith("." + ext))) {
    return upstreamTransformer.transform({
      src: fixRenderingBugs(src),
      filename,
      options
    })
  }

  return upstreamTransformer.transform({ src, filename, options });
}

step 2: add rn-cli.config.jsto project's root

第 2 步：添加rn-cli.config.js到项目的根目录

module.exports = {
    getTransformModulePath() {
      return require.resolve("./transformer");
    },
    getSourceExts() {
      return [/* "ts", "tsx", */ "svgx"];
    }
  };

The above mentioned solutions will work in production apps too ?

上述解决方案也适用于生产应用程序吗？

回答by Daniel Raouf

Note: Svg does not work for android release versions so do not consider for android. It will work for android in debug mode only. But it works fine for ios.

注意：Svg 不适用于 android 发行版，所以不要考虑 android。它仅适用于调试模式下的 android。但它适用于ios。

Use https://github.com/vault-development/react-native-svg-uri

使用https://github.com/vault-development/react-native-svg-uri

Install

安装

npm install react-native-svg-uri --save
react-native link react-native-svg # not react-native-svg-uri

Usage

用法

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


<SvgUri source={require('./path_to_image/image.svg')} />

回答by YungGun

All these solutions are absolutely horrid. Just convert your SVG to a PNG and use the vanilla <Image/>component. The fact that react-native still does not support SVG images in the Imagecomponent is a joke. You should never install an additional library for such a simple task. Use https://svgtopng.com/

所有这些解决方案都非常可怕。只需将您的 SVG 转换为 PNG 并使用 vanilla<Image/>组件。react-native 仍然不支持Image组件中的SVG 图像的事实是一个笑话。你永远不应该为这样一个简单的任务安装额外的库。使用https://svgtopng.com/