如何在 React Native 上显示 SVG 文件？
Posted
技术标签:
【中文标题】如何在 React Native 上显示 SVG 文件？【英文标题】：How to show SVG file on React Native? 【发布时间】：2016-12-14 07:25:05 【问题描述】：我想显示 svg 文件（我有一堆 svg 图像）但是我找不到显示的方式。我尝试使用 react-native-svg 的 Image 和 Use 组件，但它们无法使用。我试图用原生方式做到这一点，但只显示 svg 图像真的很困难。
示例代码：
import Svg,
Use,
Image,
from 'react-native-svg';
<View>
<Svg >
<Image href=require('./svg/1f604.svg') />
</SvgRn>
</View>
我也知道 react native 基本上不支持 svg，但我认为有人用棘手的方式解决了这个问题（有/没有 react-native-svg）
【问题讨论】：
你不能使用 use 来显示整个文件，你需要图像。 是的，我也试过@RobertLongson，但它也不起作用。 你可以把它添加为css backgroundImage，你试过了吗？ 我试过了，但是反应原生 View 组件不支持 css 样式的 backgroundImage 属性。 @danilarend 我不确定您为什么要使用 SVG 包装器来包装 SVG 图像。 【参考方案1】：我使用了以下解决方案：
-
使用https://svg2jsx.herokuapp.com/ 将
.svg 图像转换为JSX
使用 https://react-svgr.com/playground/?native=true 将 JSX 转换为 react-native-svg 组件（确保选中“React Native”复选框）
【讨论】：
那么如何使用该组件呢？可以分享一下代码吗？ 如果您点击此链接，您将看到一个带有导入的示例 svgr.now.sh（选中“React Native 复选框）。将其用作常规 React 组件，放置它而不是react-native-svg 软件包。还要确保运行这个命令来链接你的包react-native link react-native-svg
这是一个实现 SVG 文件的漫长过程，最好使用github.com/kristerkari/react-native-svg-transformer 建议如下***.com/a/55604442/1854104【参考方案2】：
我发布了另一个解决方案（react-native-vector-icons） here。这种方法使用矢量字体（来自 SVG）而不是 SVG 文件。 PS：react-native-vector-icons 是 react-native 中处理 SVG 的最佳方法，它也适用于 ios 和 android。您将能够更改矢量图标的颜色和大小。
如果您想将 svg 直接插入到您的应用中，您可以尝试使用 3rd 方库：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
svgXmlData=testSvg
/>
);
【讨论】：
报错“无法将没有css节点的子节点添加到没有度量函数的节点”。 看看我在这里发布的答案，使用字体而不是 svg。这是一个更好的解决方案：***.com/questions/49951885/… 这个库太慢了。它将每个 svg 包装在自己的 webview 中。 tnx，这是最快的解决方案，但我使用的不是 svgXmlData=testSvg，而是 source=testSvg 就像一个魅力。 tnx 再次。 @Omarbakhsh 我建议你试试这个***.com/questions/49951885/…【参考方案3】：在尝试了许多方法和库后，我决定创建一个新字体（使用Glyphs 或此tutorial）并将我的 SVG 文件添加到其中，然后将“文本”组件与我的自定义字体一起使用。 希望这可以帮助任何在 react-native 中遇到 SVG 问题的人。
【讨论】：
我认为你是对的，字体系列可能是将简单的 svg 转换为 react native 的最简单方法 关于该主题的精彩教程：blog.bam.tech/developper-news/…。需要 Vector Icons 节点包。 如果需要导入多色凹陷文件，此方案无效 我已经用 icomoon 尝试了它的解决方案，但没有成功，他们的支持也不活跃。而 fontello 正在改变我的 svgs。【参考方案4】：安装react-native-svg-transformer
npm i react-native-svg-transformer --save-dev
我使用 SVG 如下，效果很好
import LOGOSVG from "assets/svg/logo.svg"
在渲染中
<View>
<LOGOSVG
/>
</View>
【讨论】：
当我从图像文件夹导入 svg 文件 HEARTSVG 时，它显示错误。并且导入png文件没有错误。有什么建议吗？【参考方案5】：我已经尝试了上述所有解决方案以及堆栈之外的其他解决方案，但没有一个对我有用。最后，经过长时间的研究，我为我的世博项目找到了一种解决方案。
如果您需要它在 expo 中工作，一种解决方法可能是使用 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 strokeWidth=5 stroke="black" />
);
【讨论】：
这对我来说也很好用。我们可以通过在浏览器中打开并查看页面源代码来轻松获取 svg 文件的路径，然后直接使用路径并将你可以用一个简单的方法做到这一点
首先，你应该安装，
-
npm install -s react-native-svg
react-native 链接 react-native-svg
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%"/>【讨论】：
【参考方案7】：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>
)
【讨论】：
您分享的内容很棒，但我意识到 react-native-svg-transformer 必须作为开发依赖项安装，所以就像您安装一样：首先：yarn add react-native-svg 或 @987654325 @ 然后：yarn add react-native-svg-transformer -D 或 npm i --dev react-native-svg-transformer。【参考方案8】：
我遇到了同样的问题。我正在使用我找到的这个解决方案：React Native display SVG from a file
它并不完美，我今天正在重新审视，因为它在 Android 上的表现要差得多。
【讨论】：
实际上这是一个有创意的答案，但它对我的适应没有帮助:) 因为我将使用图标列表（10 个或更多 SVG 图标）所以如果我使用它，我猜它可能对性能非常不利.你怎么看？ 我在一个页面上渲染了 10-15 个 svg。没有人抱怨 iOS，每个人都抱怨 Android。在 iOS 上会有 0.1-0.3 秒的延迟（加载前会出现一瞬间的白色闪光）。在 Android 上它可能是 1 秒，有时它们永远不会加载。最后，我签入了我的 SVG，然后编写了一个脚本，使用 svg2png 将它们转换为大小完全正确的 PNG。然后将<Image> 与这些PNG 一起使用。鉴于 SVG 在 React Native 中的当前状态，没有 ETA 可以让 SVG 正常工作，所以如果你不能忍受这种工作，这是你最好的选择。【参考方案9】：
使用https://github.com/kristerkari/react-native-svg-transformer
在这个包中提到 .svg 文件在 React Native v0.57 及更低版本中不受支持，因此请为 svg 文件使用 .svgx 扩展名。
对于 web 或 react-native-web 使用 https://www.npmjs.com/package/@svgr/webpack
要使用 react-native-svg-uri 和 react-native 0.57 及更低版本渲染 svg 文件，您需要将以下文件添加到您的根项目中
注意：将扩展名
svg更改为svgx
第 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(//gi, "");
// text = text.replace(//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 );
第 2 步：将 rn-cli.config.js 添加到项目的根目录
module.exports =
getTransformModulePath()
return require.resolve("./transformer");
,
getSourceExts()
return [/* "ts", "tsx", */ "svgx"];
;
上述解决方案也适用于生产应用程序✅
【讨论】：
【参考方案10】：您可以将任何 SVG 转换为组件并使其可重复使用。
这是我最简单的方法的答案
SVG to component
【讨论】：
【参考方案11】：import React from 'react'
import SvgUri from 'react-native-svg-uri';
export default function Splash()
return (
<View style=styles.container>
/* provided the svg file is stored locally */
<SvgUri
source=require('./logo.svg')
/>
/* if the svg is online */
<SvgUri
source= uri: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'
/>
<Text style=styles.logoText>
Text
</Text>
</View>
)
const styles = StyleSheet.create(
container:
flex: 1,
justifyContent: 'center',
alignItems: 'center'
,
logoText:
fontSize: 50
);
【讨论】：
使用npm install react-native-svg-uri --save安装需要的包【参考方案12】：
2022 年适用于我的方法，适用于仍然坚持此方法的任何人，react native 版本 0.63.4，react-native-svg 版本 ^12.1。 0，您也可以将此方法用于其他版本，但请始终先检查库的文档：
通过运行此命令 yarn add react-native-svg-transformer --dev 或使用 npm 安装 react-native-svg-transformer（如果您喜欢 npm i react-native-svg react-native-svg-transformer --save-dev）
通过运行yarn add babel-plugin-inline-import --dev安装babel-plugin-inline-import
您需要将您的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']
;
)();确保将您的 svg 文件导入到您的组件中，如下所示：import CreditCard from '../assets/CreditCard'; 请注意我没有将.svg 文件扩展名添加到导入中，这是因为它在运行时给了我这个错误view config getter callback react-native-svg它但删除它似乎使它运行顺利。您可以通过这种方式将文件添加为 jsx 元素，例如 <CreditCard />。
最后通过在 mac 上使用 ^Ctrl + C 停止打包程序来重新启动它，然后使用此命令 yarn start:dev --reset-cache 再次重新启动它并再次安装应用程序。
【讨论】：
【参考方案13】：注意：Svg 不适用于 android 发布版本，因此不要考虑用于 android。它仅适用于调试模式下的 android。但它适用于 ios。
使用https://github.com/vault-development/react-native-svg-uri
安装
npm install react-native-svg-uri --save
react-native link react-native-svg # not react-native-svg-uri
用法
import SvgUri from 'react-native-svg-uri';
<SvgUri source=require('./path_to_image/image.svg') />
【讨论】：
@AravindVemula 你是对的。它不适用于 android 发布版本。我也找不到解决办法。可能到现在还没有解决办法。我放弃了使用 svg 并转而使用传统的方式来响应原生图像【参考方案14】：我用这两个插件，
-
[react-native-svg] https://github.com/react-native-community/react-native-svg)
[
react-native-svg-transformer] https://github.com/kristerkari/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"]
;
)();
更多详情，您可以访问此链接
https://medium.com/game-development-stuff/how-to-import-svgs-on-react-native-dc76b56403ba https://medium.com/@majirosstefan/the-svgs-inside-react-native-0-61-5-and-storybook-566bcd43ba94【讨论】：
【参考方案15】：-
首先将
react-native-svg 安装到您的项目中。
打开 https://react-svgr.com/ 并转到操场并选择 React native
复制粘贴您的 SVG 代码并使用输出代码。
例如：- 这是我得到的示例 SVG。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17">
<defs>
<path id="a" d="M16.191 1.027L9.023 8.196l7.168 7.168-.83.83-7.169-7.167-7.168 7.168-.831-.831L7.36 8.196.19 1.027l.832-.83L8.19 7.366 15.359.197z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<use fill="#FFF" fill-rule="nonzero" xlink:href="#a"/>
<g fill="#3D3D3D" mask="url(#b)">
<path d="M0 0h16v16H0z"/>
</g>
</g>
</svg>
输出：-
import * as React from "react"
import Svg, Defs, Path, G, Mask, Use from "react-native-svg"
function SvgComponent(props)
return (
<Svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width=17
height=17
viewBox="0 0 17 17"
...props
>
<Defs>
<Path
id="prefix__a"
d="M16.191 1.027L9.023 8.196l7.168 7.168-.83.83-7.169-7.167-7.168 7.168-.831-.831L7.36 8.196.19 1.027l.832-.83L8.19 7.366 15.359.197z"
/>
</Defs>
<G fill="none" fillRule="evenodd">
<Mask id="prefix__b" fill="#fff">
<Use xlinkHref="#prefix__a" />
</Mask>
<Use fill="#FFF" fillRule="nonzero" xlinkHref="#prefix__a" />
<G fill="#3D3D3D" mask="url(#prefix__b)">
<Path d="M0 0h16v16H0z" />
</G>
</G>
</Svg>
)
export default SvgComponent
** 但是当我在我的项目中使用上面的代码时，它不能正确渲染。所以我按照下面的方式完成了它，它以某种方式对我有用。
import * as React from "react"
import Svg, Path, G from "react-native-svg"
function SvgComponent(props)
return (
<Svg
width=17
height=17
...props
>
<G>
<Path
id="prefix__a"
d="M16.191 1.027L9.023 8.196l7.168 7.168-.83.83-7.169-7.167-7.168 7.168-.831-.831L7.36 8.196.19 1.027l.832-.83L8.19 7.366 15.359.197z"
/>
</G>
</Svg>
)
export default SvgComponent
【讨论】：
【参考方案16】：我编写了一个新库，以便能够使用基于 .svg 文件的原生矢量资源，称为 react-native-vector-image。它不需要任何自定义 babel 转换，您可以像使用其他基于位图的资产一样使用它，但是在将 svg 转换为原生等价物时还有一个额外的步骤（尽管您只需要在添加新资产时运行它)。
使用您的示例，代码看起来像这样
import VectorImage from 'react-native-vector-image';
<View>
<VectorImage source=require('./svg/1f604.svg') />
</View>
【讨论】：
我们可以向 VectorImage 组件发送一些额外的道具吗？类似于 svg 文件中元素的动态颜色？ 你可以设置一个tintColor prop。
但我猜tintColor 会为整个 svg 文件添加颜色。
是的，它是静态图像而不是反应组件。您可以提供暗模式或高对比度版本，但您仅限于静态图像文件可以做什么，所以没有逻辑。也许你可以解释一下你想要达到的目标？
这听起来像是react-native-svg 的工作。【参考方案17】：
在两个平台上对我都有效的最佳解决方案是https://github.com/seekshiva/react-native-remote-svg。
我还使用https://github.com/react-native-svg/react-native-svg 进行了条件渲染，以便在两个平台上获得最佳效果，因为这里提到了 Android 存在一个已知问题https://***.com/a/54182426/4934132。
以防万一我有 ErrorBoundry 来覆盖异常。
看起来像这样：
<ErrorBoundary
FallbackComponent=error => ErrorFallback(error)
onReset=() =>
// reset the state of your app so the error doesn't happen again
onError=myErrorHandler
>
Platform.OS === 'ios' ?
<SvgCssUri uri=url />
:
<Image
source= uri: url
style= width: "100%", height: '100%'
/>
</ErrorBoundary>
【讨论】：
【参考方案18】：您可以尝试使用 https://svg2jsx.herokuapp.com/ 将 .svg 图像转换为 JSX
然后将 JSX 代码保存在 assest/SVGFile.js 中 然后导入，例如import open from "../../../../assets/SVGFile";
最后加上<SvgXml xml=open scaleX=2 scaleY=2 width=20 height=20 />
确保安装，yarn add react-native-svg
一切顺利！
【讨论】：
【参考方案19】：使用 react-native-svg see 支持android和ios。
这是基本示例
import * as React from 'react';
import SvgUri from 'react-native-svg';
export default () => (
<SvgUri
uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
/>
);
如果您想在一个组件中同时使用普通图像和 svg 图像，您可以创建一个自定义函数来检查 url 是否具有 svg 并返回 Image 组件或 SvgUri
const ImageComponent = (Props) =>
const Istyle, url, mode = props;
const isSvg = url?.includes('.svg') ?? false;
if (isSvg)
return <SvgCssUri style=Istyle uri=defaultAvatar />;
if (!isSvg)
return <Image style=Istyle source=uri: url resizeMode=mode />;
;
//let testURl = "https://avatars.dicebear.com/api/male/john.svg"
【讨论】：
【参考方案20】：所有这些解决方案都非常可怕。只需将您的 SVG 转换为 PNG 并使用 vanilla <Image/> 组件。 react-native 仍然不支持 Image 组件中的 SVG 图像的事实是一个笑话。你永远不应该为这样一个简单的任务安装额外的库。使用https://svgtopng.com/
【讨论】：
这是一个开源项目——如果你有比上面提到的更好的解决方案，我相信他们会对你的 pull request 感到满意...... :)以上是关于如何在 React Native 上显示 SVG 文件？的主要内容，如果未能解决你的问题，请参考以下文章
无法使用 react-native-svg 或 Svg/expo 让 Svg 显示在 react-native 中
React Native 和 Expo - SVG 不会在 iOS 设备上呈现
React Native - 如何使用本地 SVG 文件（并为其着色）