Преобразование svg в response-native-svg
Как это сделать проще всего? Я нашел много конвертеров svg в JSX, и это то, что мне нужно, но это не работает в react-native. Мне нужно преобразовать код svg во что-то, что я могу отобразить в своем приложении, используя response-native-svg. Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я могу придумать следующие варианты. Тот, который вы используете, будет зависеть от количества файлов, которые вам нужно преобразовать.
Опция 1 (несколько файлов)
Скопируйте и вставьте свой svg-код в этот сайт и установите флажок React Native. Это даст вам код, который вы затем можете использовать с реагировать-родной-svg
Используйте этот вывод в следующем коде (замените SvgComponent тем, что было сгенерировано):
import React, { Component } from 'react';
import { View } from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';
const SvgComponent = props => (
<Svg viewBox = "0 0 48 1" style = {props.style}>
<Path d = "M0 0h48v1H0z" fill = "#063855" fillRule = "evenodd" />
</Svg>
);
class MySVGIcon extends Component {
render() {
const { style } = this.props;
const component = SvgComponent(style);
return <View style = {style}>{component}</View>;
}
}
export default MySVGIcon;
Вариант 2 (много файлов)
Вместо того, чтобы конвертировать их, вы можете встроить их прямо в свой код с помощью реагировать-родной-удаленный-SVG.
Например, вы можете сделать это:
import Image from 'react-native-remote-svg';
class MyImageClass extends Component {
render () {
// Embed code or read a SVG file...
const mySVGImage = '<svg width = "48px" height = "1px" viewBox = "0 0 48 1" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"><rect id = "Rectangle-5" x = "25" y = "36" width = "48" height = "1"></rect></svg>';
return (
<Image source = {{
uri: "data:image/svg+xml;utf8," + mySVGImage
}}/>
);
}
}
Вариант 3 (самый крутой вариант)
Это не бесплатно, как два других варианта, но и не дорого. PaintCode - один из тех инструментов, которые мне очень нравятся. Версия 3+ теперь поддерживает java-скрипт. Таким образом, вы можете загрузить в него свои svg-файлы, и он выдаст код, который вы можете использовать в своем приложении. Преимущество здесь в том, что интерфейс более дружелюбен, чем первый вариант выше, и вы можете затем анимировать каждый объект внутри файла svg из своего кода.
Я использую expo для создания собственного приложения для реагирования, и у меня был такой же запрос, но я нашел здесь решение реагировать-родной-svg. Я использую вариант XML, как показано ниже.
ШАГ 1. Сначала я использовал эту ссылку конвертировать SVG в JSX для React для преобразования SVG в JSX (иногда вам не нужно преобразовывать его, это зависит от самого значка).
ШАГ 2 - откройте новый файловый компонент и импортируйте React и import { SvgXml } from 'react-native-svg', затем создайте внутри нормальный функциональный компонент.
ШАГ 3 - заключите преобразованный тег значка SVG в кавычки, чтобы он был похож на этот "<svg>some icon code inside</svg>", затем сохраните его в переменной var, const, let..etc.
ШАГ 4 - вернуть <SvgXml xml = {the variable goes here} />.
ШАГ 5 - экспортируйте компонент как обычно.
вот пример кода
import React from 'react'
import { SvgXml } from 'react-native-svg';
function FastRunningIcon(props) {
const xml = `<svg
xmlns = "http://www.w3.org/2000/svg"
width = "${props.width}"
height = "${props.height}"
viewBox = "0 0 21.244 20"
>
<path
fill = "#595959"
d = "M7.379 20a1.21 1.21 0 01-.783-.291.235.235 0 01-.04-.041 1.258 1.258 0 01-.293-1.036 2.179 2.179 0 01.544-1.049c.387-.459 1.089-1.209 2.085-2.231H6.874a1.426 1.426 0 01-1.062-.412 1.263 1.263 0 01-.332-.863 1.166 1.166 0 01.345-.85 1.7 1.7 0 011.01-.425c.454-.05 1.532-.07 2.575-.09h.187c.4-.008.649-.009.869-.01h.506L8.4 8.925 8.38 8.9a2.075 2.075 0 01-.2-1.877 3.3 3.3 0 011.165-1.272l.013-.013L12.412 3.6l-1.221-.957-4.011.094h-.04c-.064 0-.116.007-.168.007a2.209 2.209 0 01-.642-.1 1.271 1.271 0 01-.43-.213.755.755 0 01-.279-.478.014.014 0 00-.006-.006s-.006 0-.007-.007A1.132 1.132 0 016.078.9 2.949 2.949 0 017.02.492a.547.547 0 01.067-.013l4.356-.465h.027a1.174 1.174 0 01.2-.014h.052a1.324 1.324 0 01.743.252l.008.005.008.005.019.018.019.013c.6.392 1.155.764 1.575 1.049.373.251.8.54 1.142.784.177.125.3.218.4.293a.7.7 0 01.087.077l.045.041a.251.251 0 00.028.022.364.364 0 01.105.112.038.038 0 00.011.014.111.111 0 01.015.026l.008.012c.171.258.752 1.14 1.041 1.675a1.8 1.8 0 01.226.678.438.438 0 01.08.212l.185 2.005 2.178.12h.013c.062.005.124.007.185.009h.032a2.025 2.025 0 01.66.1.857.857 0 01.451.358 1.063 1.063 0 01.12.625v.013a1.108 1.108 0 01-.6.851 2.419 2.419 0 01-1.022.252h-.027c-.568 0-3.523.171-3.545.173h-.08a1.093 1.093 0 01-.632-.324 1.458 1.458 0 01-.276-.454v-.022l-.006-.014a.384.384 0 01-.04-.093l-.226-1.3-.688.437-.483.307-.029.019-1.138.724.119.184.117.182c.267.414.555.863.88 1.374l.162.256.014.023.02.031.031.048.015.023c.464.732 1.165 1.838 1.365 2.211v.013a1.29 1.29 0 010 1.395 1.568 1.568 0 01-1.3.545h-.969l-.1.1-.026.027c-.005.005-.6.615-1.48 1.49-.9.9-1.878 1.874-2.284 2.231a3.069 3.069 0 01-1.2.757.963.963 0 01-.299.036zm2.7-4.647c-.019.02-1.972 2.024-2.616 2.788a1.347 1.347 0 00-.345.638.333.333 0 00.066.292l.008.007c.061.054.091.081.146.081a.442.442 0 00.113-.021 2.415 2.415 0 00.85-.571c.339-.3 1.428-1.376 2.257-2.2.333-.332.51-.514.682-.689.1-.1.2-.2.314-.32zm-.133-.894a.486.486 0 01.186.043h3.6a.771.771 0 00.611-.2c.062-.082.109-.186-.053-.478v-.014c-.133-.247-.908-1.49-1.58-2.55-.534-.841-1-1.572-1.18-1.847v-.009l-.076-.117-.067-.1-.014-.022a.426.426 0 01.127-.585l3.1-1.98a.424.424 0 01.266-.173l.366-.233.167-.106.473-.3.021-.013.141-.09a.683.683 0 00.319-.346.646.646 0 00-.12-.531c-.2-.365-.66-1.094-1.014-1.641l-.007-.011-.007-.012v.008a.075.075 0 010 .021l-.005-.01-.01-.009a.772.772 0 00-.071-.059l-.031-.023a10.05 10.05 0 00-.341-.256 53.275 53.275 0 00-.807-.553l-.091-.063-.015-.01-.023-.015-.011-.011-.014-.01-.16-.108c-.479-.323-.967-.645-1.289-.858l-.174-.115-.009-.005-.009-.006-.057-.038L12 .97V.965a.16.16 0 01-.022-.021.388.388 0 00-.278-.092.654.654 0 00-.127.012h-.014l-4.316.452a.014.014 0 00-.006.006s0 .006-.007.007a2.253 2.253 0 00-.651.266c-.115.084-.126.112-.119.185a.482.482 0 00.119.053A1.62 1.62 0 007 1.891h.13l4.21-.093a.456.456 0 01.266.093L13.399 3.3a.425.425 0 01-.026.677l-3.52 2.47a2.649 2.649 0 00-.889.93 1.1 1.1 0 00.146 1.076l.014.013a.01.01 0 010 .007.005.005 0 000 .006l3 4.4a.424.424 0 01.024.436.419.419 0 01-.37.229c-.008 0-1.056.005-2.151.027-1.131.022-2.4.059-2.7.093a.867.867 0 00-.517.186.268.268 0 00-.08.238.422.422 0 00.106.279.519.519 0 00.438.146h2.9a.382.382 0 01.12-.04.492.492 0 01.047-.014zm6.6-8.084l-.02.013-.026.012-.053.034-.008.005c-.53.343-.844.544-1.014.652l.281 1.609a.836.836 0 00.119.186.143.143 0 00.1.049h.063c.457-.028 2.77-.168 3.443-.17h.026a1.842 1.842 0 00.651-.146c.124-.066.139-.1.147-.173a.745.745 0 000-.122v-.012a2.468 2.468 0 00-.387-.036h-.041l-.22-.014H19.6l-2.54-.133a.428.428 0 01-.4-.385l-.12-1.368zm-8.41 4.693a.48.48 0 01-.063 0H.42a.43.43 0 01-.08-.851h7.729a.48.48 0 01.063 0 .43.43 0 110 .859zm-1.7-2.125a.539.539 0 01-.063 0H.42a.43.43 0 01-.08-.851h6.029a.539.539 0 01.063 0 .43.43 0 110 .859zm0-2.125a.542.542 0 01-.063 0H.42a.43.43 0 01-.08-.851h6.029a.542.542 0 01.063 0 .43.43 0 110 .859zm2.123-2.124a.51.51 0 01-.065 0H.42a.43.43 0 01-.08-.85h8.154a.51.51 0 01.065 0 .429.429 0 010 .859zm10.347 0a2.337 2.337 0 112.337-2.337 2.34 2.34 0 01-2.337 2.332zm0-3.825a1.472 1.472 0 00-1.488 1.488 1.487 1.487 0 102.974 0A1.471 1.471 0 0018.906.864z"
data-name = "Shape Copy 4"
></path>
</svg>`
return <SvgXml xml = {xml} />
}
export default FastRunningIcon;
Вы можете просто попробовать этот инструмент, который выполнит преобразование за вас: https://github.com/MoOx/react-from-svg
Он может конвертировать SVG в файлы React Native, а также в файлы Reason / ReScript React Native и даже файлы React DOM с возможностью удаления атрибутов заливки или обводки.
Вы рассматривали возможность использования этой библиотеки вместо: github.com/vault-development/react-native-svg-uri? он будет отображать изображение прямо из вашего файла SVG. Если вы хотите использовать
react-native-svg, вам необходимо преобразовать этот SVG в Path (лично я использую для этого GIMP), а затем настроить код в соответствии со стилем библиотеки.