Конвертировать SVG в реагировать-родной-SVG

Question

Какой самый простой способ сделать это?Я нашел множество конвертеров svg в JSX, чего я и хочу, но это не работает в реактивной среде.Мне нужно преобразовать код SVG во что-то, что я могу отобразить в моем приложении, используя response-native-svg.Спасибо!

Answer 1

Я могу подумать о следующих двух вариантах.Тот, который вы используете, будет зависеть от количества файлов, которые вы должны конвертировать.

Вариант A

Скопируйте и вставьте svg-код на этот сайт и установите флажок React Native.Это даст вам код, который вы затем сможете использовать с act-native-svg

Это будет выглядеть так:

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;

Опция B (если у вас много файлов.)

Вместо того, чтобы конвертировать их, вы можете встроить их непосредственно в код с помощью реагировать-нативно-удаленно-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
                      }}/>
    );
  }
}