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

Question

我想显示svg文件(我有一堆svg图像),但我找不到显示的方式.我尝试使用反应原生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,但我认为有人用棘手的方式修复了这个问题(有/没有react-native-svg)

Answer 1

我使用了以下解决方案:

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

Answer 2

对于 2022 年仍然坚持这个问题的人来说，方法对我有用，react native 版本0.63.4，react-native-svg版本 ^12.1.0，您也可以将此方法用于其他版本，但请始终检查首先是库的文档：

1. react-native-svg-transformer如果您愿意，可以通过运行此命令yarn add react-native-svg-transformer --dev或使用 npm进行安装npm i react-native-svg react-native-svg-transformer --save-dev

2. babel-plugin-inline-import通过运行安装yarn add babel-plugin-inline-import --dev

3. 您需要将metro.config.js文件更新为如下所示：

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false
        }
      })
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg']
    }
  };
})();

4. 确保将您的 svg 文件导入到您的组件中，如下所示：import CreditCard from '../assets/CreditCard';请注意我没有将.svg文件扩展名添加到导入中，这是因为它在运行时给了我这个错误，view config getter callback react-native-svg但删除它似乎使它运行顺利。您可以通过这种方式将文件添加为像这样的 jsx 元素<CreditCard />。

5. 最后，通过在 mac 上停止使用来重新启动打包程序^Ctrl + C，然后使用此命令再次重新启动它yarn start:dev --reset-cache并再次安装应用程序。

Answer 3

安装react-native-svg-transformer

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

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

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

在渲染中

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

Answer 4

我已经尝试了上述所有解决方案和堆栈之外的其他解决方案，但没有一个对我有用。最后，经过长时间的研究，我为我的博览会项目找到了一种解决方案。

如果您需要它在博览会中工作，一种解决方法可能是使用https://react-svgr.com/playground/并将道具的传播移动到 G 元素而不是像这样的 SVG 根：

import * as React from 'react';
import Svg, { G, Path } from 'react-native-svg';

function SvgComponent(props) {
  return (
    <Svg viewBox="0 0 511 511">
      <G {...props}>
        <Path d="M131.5 96c-11.537 0-21.955 8.129-29.336 22.891C95.61 132 92 149.263 92 167.5s3.61 35.5 10.164 48.609C109.545 230.871 119.964 239 131.5 239s21.955-8.129 29.336-22.891C167.39 203 171 185.737 171 167.5s-3.61-35.5-10.164-48.609C153.455 104.129 143.037 96 131.5 96zm15.92 113.401C142.78 218.679 136.978 224 131.5 224s-11.28-5.321-15.919-14.599C110.048 198.334 107 183.453 107 167.5s3.047-30.834 8.581-41.901C120.22 116.321 126.022 111 131.5 111s11.28 5.321 15.919 14.599C152.953 136.666 156 151.547 156 167.5s-3.047 30.834-8.58 41.901z" />
        <Path d="M474.852 158.011c-1.263-40.427-10.58-78.216-26.555-107.262C430.298 18.023 405.865 0 379.5 0h-248c-26.365 0-50.798 18.023-68.797 50.749C45.484 82.057 36 123.52 36 167.5s9.483 85.443 26.703 116.751C80.702 316.977 105.135 335 131.5 335a57.57 57.57 0 005.867-.312 7.51 7.51 0 002.133.312h48a7.5 7.5 0 000-15h-16c10.686-8.524 20.436-20.547 28.797-35.749 4.423-8.041 8.331-16.756 11.703-26.007V503.5a7.501 7.501 0 0011.569 6.3l20.704-13.373 20.716 13.374a7.498 7.498 0 008.134 0l20.729-13.376 20.729 13.376a7.49 7.49 0 004.066 1.198c1.416 0 2.832-.4 4.07-1.2l20.699-13.372 20.726 13.374a7.5 7.5 0 008.133 0l20.732-13.377 20.738 13.377a7.5 7.5 0 008.126.003l20.783-13.385 20.783 13.385a7.5 7.5 0 0011.561-6.305v-344a7.377 7.377 0 00-.146-1.488zM187.154 277.023C171.911 304.737 152.146 320 131.5 320s-40.411-15.263-55.654-42.977C59.824 247.891 51 208.995 51 167.5s8.824-80.391 24.846-109.523C91.09 30.263 110.854 15 131.5 15s40.411 15.263 55.654 42.977C203.176 87.109 212 126.005 212 167.5s-8.824 80.391-24.846 109.523zm259.563 204.171a7.5 7.5 0 00-8.122 0l-20.78 13.383-20.742-13.38a7.5 7.5 0 00-8.131 0l-20.732 13.376-20.729-13.376a7.497 7.497 0 00-8.136.002l-20.699 13.373-20.727-13.375a7.498 7.498 0 00-8.133 0l-20.728 13.375-20.718-13.375a7.499 7.499 0 00-8.137.001L227 489.728V271h8.5a7.5 7.5 0 000-15H227v-96.5c0-.521-.054-1.03-.155-1.521-1.267-40.416-10.577-78.192-26.548-107.231C191.936 35.547 182.186 23.524 171.5 15h208c20.646 0 40.411 15.263 55.654 42.977C451.176 87.109 460 126.005 460 167.5V256h-.5a7.5 7.5 0 000 15h.5v218.749l-13.283-8.555z" />
        <Path d="M283.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM331.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM379.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15zM427.5 256h-16a7.5 7.5 0 000 15h16a7.5 7.5 0 000-15z" />
      </G>
    </Svg>
  );
}

export default function App() {
  return (
    <SvgComponent width="100%" height="100%" strokeWidth={5} stroke="black" />
  );
}

Answer 5

SVG 不直接在本机应用程序中支持。为了显示这些，我们需要借助第三方模块

请按照以下步骤操作

步骤1。安装react-native-svg和react-native-svg-transformer

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

第2步。添加文件Metro.config.js如果不存在

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => { 
    const {  
        resolver: { 
            sourceExts, 
            assetExts 
        }  
    } = await getDefaultConfig(); 

    return {
        transformer: {      
            babelTransformerPath: require.resolve("react-native-svg-transformer")    
        },    
        resolver: {
            assetExts: assetExts.filter(ext => ext !== "svg"),
            sourceExts: [...sourceExts, "svg"]    
        }};
})();

步骤 3 . 像 React 组件一样使用 SVG 文件

import Invest from '../assets/invest.svg'; // import SVG

return (
        <View>
            <Invest /> // Use SVG as component
        </View>
    )

Answer 6

在尝试了很多方法和库后,我决定创建一个新字体(使用Glyphs或本教程)并将SVG文件添加到其中,然后使用"Text"组件和我的自定义字体.

希望这可以帮助那些在反应原生中遇到与SVG相同问题的人.

Answer 7

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

如果您想将svg直接插入到您的应用中，可以尝试使用第3方库：react-native-svg。github中有超过3k的星星，这是最好的方法之一。

• 安装：
  • NPM我反应本机SVG
  • npm我react-native-svg-uri
• 链接到本机：
  • react-native链接react-native-svg

这是一个示例：

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

Answer 8

你可以用一种简单的方法来做到这一点

首先，您应该进行安装，

1. npm install -s react-native-svg
2. 反应原生链接反应原生svg
3. npm install -s react-native-svg-transformer

然后，您应该在您的 Metro.config.js 文件中添加以下代码

const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

之后，您应该在根目录中创建一个名为 declarations.d.js 的新文件，并使用以下代码

declare module "*.svg" {
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

最后，这是一个导入方法

import USER from "../../assets/icons/user.svg"

而且，这是针对 jsx

<USER width="100%" height="100%"/>

Answer 9

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

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