SVG-Bild in der reaktions-nativen

Question

Ich möchte SVG-Bild reagieren nativ verwenden. Früher wurde es nicht unterstützt. Aber wenn man sich den Quellcode von react-native anschaut, scheint er jetzt unterstützt zu werden.

Hier ist mein Beispielcode:

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

Hier ist mein svg Bild

<?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> 

Es hat nichts zeigen.

Jede Hilfe wäre willkommen.

Answer 1

As far as I know React Native currently (3/2016) doesn't support SVGs. Auf der anderen Seite gibt es eine Bibliothek namens react-native-svg, die Ihnen dabei helfen soll.

Answer 2

Oder können Sie auch diese Lösung versuchen: https://github.com/necinc/msvgc

Es macht wieder verwendbaren Komponenten aus Glatt- oder SVG-Dateien über die Befehlszeile reagieren.
Werke reagieren native

Answer 3

Diese Bibliothek für alle SVG-Typen nicht funktioniert (noch) nicht, aber es scheint, dass es zu bekommen: https://github.com/react-native-community/react-native-svg