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

Question

У меня есть следующий код SVG, и я хочу преобразовать его в Reaction-native-SVG. Как это сделано правильно?

<svg width=200 height=200>
  <defs>
    <marker id="markerArrow1" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
      <path d="M2,2 L2,11 L10,6 L2,2" />
    </marker>
  </defs>
  <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600; marker-end: url(#markerArrow1)" />
</svg>

Answer 1

Вы можете использовать act-native-remote-svg , который позволит вам загрузить любой код SVG.

import React from 'react';
import Image from 'react-native-remote-svg';

class MyView extends React.Component {
  render() {
    const render =
      "<svg width=200 height=200>" +
     "<defs>" +
     '<marker id="markerArrow1" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">' +
     '<path d="M2,2 L2,11 L10,6 L2,2" />' +
     "</marker>" +
     "</defs>" +
     '<line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600; marker-end: url(#markerArrow1)" />' +
     "</svg>";

    return (
      <Image
        style={{ flex:1 }}
        source={{
           uri: "data:image/svg+xml;utf8," + render
        }}
      />
   );
}

, который дает мне этот образ:

Answer 2

Reaction-native-svg - удивительный пакет, в котором есть только несколько отличий. Сначала вам нужно проверить, поддерживается ли все, что вы используете.

Изучив документацию , вы обнаружите, что большинство вещей просто имеют разницу в капитализации.

В настоящее время Маркер не поддерживается (см. Задачи в документации). Если вы можете быть хорошо идти.