如何在 react-native 中使用 svg 图像作为背景图像？答案

【问题标题】：How to use svg image as background image in react-native?如何在 react-native 中使用 svg 图像作为背景图像？
【发布时间】：2020-06-02 11:50:50
【问题描述】：

接下来我会在我的 react-native 应用中使用 svg：

import TestLogo from "../../assets/TestLogo.svg";
<TestLogo />

我在下一个方式中使用背景图片：

import background from '../../assets/modules/auth/signUpPattern.png'
<ImageBackground source={background} style={{width: '100%', height: '100%',  alignItems: 'center'}}>

如果我使用下一个语法：

    import Background from '../../assets/modules/auth/signUpPattern.svg'
    <ImageBackground source={<Background />} style={{width: '100%', height: '100%',  alignItems: 'center'}}>

我有空白空间，不是 svg 图片背景，如何解决？

【问题讨论】：

支持 SVG 图像似乎是 RN 0.61 的一个特性（没有测试它，但阅读它here 如果不起作用，或者你需要 RN like this 使用组件
我使用 react-native-svg 并且它有效。问题只是如何在后台使用它
您不能将背景作为组件发布到源。至少您可以尝试使用data: 作为uri-scheme（如here 所述），但我怀疑这是否可行。我读过一些 svg 在“数据：”中不起作用的东西。即将将其粘贴为子项并使用样式根据需要对其进行放大。看看sourcecode of <ImageBackround> shows you, how it's implemented
它是否适用于“数据：”，或者您将其添加为子项？很高兴它可以帮助你。
@suther 'data:' 不起作用。我会尝试像孩子一样制作

标签： reactjs image react-native svg

【解决方案1】：

import TestLogo from "../../assets/TestLogo.svg";
<TestLogo />

您可以使用它为屏幕添加背景图像。只需要将样式添加到 TestLogo 组件即可。

例子：

<TestLogo
   style={{
     position: 'absolute',
     top: 0,
     left: 0,
     right: 16,
     bottom: 0,
   }}
 />

【讨论】：

【解决方案2】：

react-native 不支持 .svg 格式。你可以使用像react-native-svg这样的库或任何其他。

【讨论】：