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

As far as I know React Native currently (3/2016) doesn't support SVGs. 另一方面，有一个名为react-native-svg的库可以帮助你。

Answer 2

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

它通过命令行从普通的svg文件生成可重用的反应组件适用于本地反应

Answer 3

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

反应原生的

3 个答案: