react-native - react-native 中的 SVG 图像

Question

我想使用 SVG 图像 react-native。之前不支持。但是通过查看 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 文件制作可重用的 React 组件。
适用于 native react