反应原生的 SVG 图像

Question

我想使用 SVG 图像反应原生。早些时候不支持它。但是通过查看 react-native 的源代码，它现在似乎得到了支持。

这是我的示例代码：

class SVGImageSample extends Component {
    render() {
        return (
            <Image source={require("./Mysvg.svg")} style={{height:40,width:40}}/>
        );
    }
}

这是我的 svg 图像

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 500 500" height="100" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
    .st0{display:none;fill:#E0E0E0;}
    .st1{display:none;}
    .st2{display:inline;fill:#848484;}
    .st3{display:none;fill:#FFFFFF;}
    .st4{fill:#C22227;}
</style>
<rect id="XMLID_8_" x="-221.1" y="-49" class="st0" width="860" height="596.7"/>
<g id="XMLID_4_" class="st1">
    <rect id="XMLID_2_" x="-38.8" class="st2" width="577.5" height="10"/>
    <rect id="XMLID_5_" x="-38.8" y="490" class="st2" width="577.5" height="10"/>
    <rect id="XMLID_18_" x="0" y="-38.8" class="st2" width="10" height="577.5"/>
    <rect id="XMLID_19_" x="490" y="-38.8" class="st2" width="10" height="577.5"/>
</g>
<image style="display:none;overflow:visible;" width="1242" height="2208" id="XMLID_1_" xlink:href="login_profile.png"  transform="matrix(0.3068 0 0 0.3068 -214.041 -274.2382)">
</image>
<circle id="XMLID_3_" class="st3" cx="250" cy="250" r="240"/>
<path id="XMLID_13_" class="st4" d="M348.3,249.4l-84.5-84.8l-18,18l49.7,50.1c1.9,1.9,0.5,5.1-2.1,5.1H151.7v25.4l141.5-0.1
    c2.7,0,4,3.2,2.1,5.1l-49,49.1l18,18l84-85.8V249.4L348.3,249.4z"/>
</svg>

它不显示任何内容。

任何帮助将不胜感激。

Answer 1

或者您也可以尝试此解决方案：https://github.com/necinc/msvgc

它通过命令行从普通 svg 文件中制作可重用的反应组件。
适用于反应原生

Answer 2

据我所知，React Native目前（3/2016）不支持SVG。另一方面，有一个名为 react-native-svg 的库应该可以帮助您。

Answer 3

这个库还不适用于所有 SVG 类型，但它似乎正在到达那里：https://github.com/react-native-community/react-native-svg