Блог

Главная - Вопросы по программированию - SVG XML-фон в React Native

SVG XML-фон в React Native

reactjs #react-native #svg

#reactjs #react-native #svg

Вопрос:

Я пытаюсь получить следующий код, проанализированный в React Native в качестве фонового изображения:

 background-color: #000000;
background-image: url("data:image/svg xml,");

Используя декодирование 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%" />;

Однако я получаю следующую ошибку:
введите описание изображения здесь

Ценю любую помощь в этом.

Спасибо

Комментарии:

1. удалите пробел между < и полигоном

2. Спасибо, теперь он отображает одно 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%" />;
Метки: