Wie kann ich SVG-Datei auf React Native zeigen?

Question

Ich möchte Svg-Dateien zeigen (ich habe Haufen Svg Bilder), aber die Sache, die ich nicht den Weg finden konnte zu zeigen. Ich habe versucht, Image und Verwenden Sie Komponenten von react-native-svg, aber sie funktionieren nicht damit. Und ich habe versucht, dies mit nativer Art und Weise zu tun, aber es ist wirklich harte Arbeit, nur Svg-Bild zu zeigen.

Beispielcode:

import Svg, { 
    Use, 
    Image, 
} from 'react-native-svg'; 

<View> 
    <Svg width="80" height="80"> 
    <Image href={require('./svg/1f604.svg')} /> 
    </SvgRn> 
</View> 

Ich weiß auch nativer reagiert nicht svg grundsätzlich unterstützt, aber ich denke, dass jemand dieses Problem mit kniffliger Art und Weise beheben (mit/ohne reagieren-native-svg)

Answer 1

I hatte das gleiche Problem. Ich verwende diese Lösung, die ich gefunden habe: React Native display SVG from a file

Es ist nicht perfekt, und ich bin heute wieder auf Besuch, weil es auf Android viel schlechter läuft.

Answer 2

Nach vielen Versuchen und Bibliotheken entschied ich mich, eine neue Schriftart zu erstellen (mit Glyphs oder tutorial) und füge meine SVG-Dateien dazu, dann verwenden Sie "Text" -Komponente mit meiner benutzerdefinierten Schriftart.

Hoffen Sie, dass dies jedem helfen, der ein Problem mit SVG in reaktionseigener Umgebung hat.

Answer 3

Es gibt eine sehr gute Lösung https://github.com/seekshiva/react-native-remote-svg ich es nur versuchen, hier und funktioniert schön, sehr einfach zu benutzen:

einfach die lib installieren: Garn hinzufügen reagieren-native-remote-svg, Import auf Ihren Bildschirm :

import Image from 'react-native-remote-svg' 

und verwenden

<View> 
    <Image source={require('./money.svg')} /> 
</View>