React Native 中的 SVG XML 背景答案

【问题标题】：SVG XML background in React NativeReact Native 中的 SVG XML 背景
【发布时间】：2022-01-11 15:50:18
【问题描述】：

我正在尝试将以下代码解析为 React Native 作为背景图像：

background-color: #000000;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' 
height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23ffb6c1' fill-opacity='0.16'%3E%3Cpolygon fill- 
rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E");

使用 URL 解码，我得到的 XML 如下：

<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>
  <g 
    fill='#ffb6c1' 
    fill-opacity='0.2'>
  <polygon 
    fill-rule='evenodd' 
    points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/>
  </g>
</svg>

我尝试使用以下包：https://github.com/react-native-svg/react-native-svg 创建一个 SVG XML 组件，如下所示：

import React from "react";
import { SvgUri, SvgXml } from "react-native-svg";

const xml = `
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>
  <g
    fill='#ffb6c1'
    fill-opacity='0.2'
  >
    <
      polygon fill-rule='evenodd'
      points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'
    />
  </g>
</svg>
`;

export default () => <SvgXml xml={xml} width="100%" height="100%" />;

但是我收到以下错误：

感谢任何帮助。

谢谢

【问题讨论】：

去掉
谢谢，它现在呈现单个 svg 图像。只需要弄清楚如何重复它并将其用作背景图案。我再开一张票。

标签： reactjs react-native svg

【解决方案1】：

正如上面评论中指出的，原来这只是多边形开始标签上的一个空白问题。

正确的反应代码：

import React from "react";
import { SvgUri, SvgXml } from "react-native-svg";

const xml = `
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 
24'>
  <g
    fill='#ffb6c1'
    fill-opacity='0.2'
  >
    <polygon 
       fill-rule='evenodd'
       points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'
  />
  </g>
</svg>
`;

export default () => <SvgXml xml={xml} width="100%" height="100%" />;

【讨论】：