Image SVG dans react-native

Je veux utiliser l'image SVG réagir indigènes. Auparavant, il n'était pas pris en charge. Mais en regardant dans le code source de réagir indigènes, il paraît que c'est maintenant pris en charge.

Voici mon exemple de code:

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

Voici mon image 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>

Il ne montre rien.

Toute aide serait appréciée.

source d'informationauteur Ritesh Bansal