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

Question

我接下来在我的本机应用程序中使用 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 图像背景，如何解决？

Answer 1

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

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

例子：

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

Answer 2

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