将svg转换为react-native svg

时间:2018-11-19 02:54:42

标签: javascript react-native svg react-native-svg

我有以下svg代码,我想将其转换为react-native-svg。如何正确完成?

conda install alerta-server
conda install -c anaconda mongodb

2 个答案:

答案 0 :(得分:1)

react-native-svg是一个了不起的软件包,只有几个区别。首先,您需要验证所使用的所有内容是否受支持。

浏览documentation时,您会发现大多数东西的大小写都不同。

当前不支持Marker(请参阅文档中的ToDo)。如果你可以去的很好。

答案 1 :(得分:0)

您可以使用 react-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
        }}
      />
   );
}

哪个给我这张图片:

enter image description here