невозможно реализовать локальное svg-изображение в приложении react-native

#javascript #reactjs #react-native #svg #react-native-svg

Вопрос:

Я могу реализовать svg, преобразованный в png, в мое приложение react-native даже после установки нижеприведенных библиотек «react-native-svg»: «false12.1.0», «react-native-svg-uri»: «false1.2.3»,

Я использую последнюю версию react-native и выполнил все шаги по реализации, предоставленные различными форумами в Google, по-прежнему получая «TypeError:json.stringify не может сериализовать циклические структуры»

Пожалуйста, помогите мне с шагами по реализации локального файла изображения svg в приложении

Ответ №1:

Значок SVG, преобразованный в PNG

 const MY_ICON = `<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.16, written by Peter Selinger 2001-2019
</metadata>
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M4830 4494 c-23 -10 -612 -592 -1718 -1697 l-1682 -1682 -553 552
c-382 383 -563 557 -589 568 -79 32 -181 12 -234 -47 -53 -58 -71 -160 -40
-231 8 -18 288 -305 662 -678 526 -524 656 -649 688 -659 59 -19 137 -7 188
28 24 17 829 817 1790 1779 1244 1244 1752 1759 1763 1785 33 81 12 190 -47
245 -54 51 -157 68 -228 37z"/>
</g>
</svg>
`;

Быстрый способ добиться этого — с помощью SvgXml компонента из react-native-svg.

 import {SvgXml} from 'react-native-svg';

 <SvgXml xml={MY_ICON} width={50} height={50} fill={'black'} />