Reagieren Native Anzeige von SVG aus einer Datei

Wie kann ich ein SVG-Bild, dass ich require() im Reagieren Nativen.

https://github.com/brentvatne/react-native-svgkit Ist nicht unter der aktiven Entwicklung.
https://github.com/magicismight/react-native-svg Nicht herausfinden können, wie, eine Datei zu laden.
WebView (oder Überbrückt WebView) nicht herausfinden Können, wie das laden der gewünschten Datei.

Was ist der beste Weg, um einfach nur das Bild anzuzeigen (don ' T brauchen, um es zu manipulieren).

Oder sollte ich einfach konvertieren es in ein png anstelle?

Mögliche Duplikate von SVG-Nutzung im React Native-Projekt

InformationsquelleAutor Sledge Hammer | 2016-05-08

1

Umwandlung in ein png ist die einfachste Lösung. SVG-Bilder sind aufgelistet in ProductPains als Schmerz zeigen, und Sie können upvote es, wenn Sie die Notwendigkeit sehen, aber für jetzt gibt es keine großen aus der box-Lösung für svg-Bilder.

InformationsquelleAutor Daniel Schmidt

Können Sie hack, um dieses mithilfe einer webview. Ich hatte auch meine SVGs als strings in .js-Dateien (die ist nicht gut). Aber es funktioniert ziemlich zuverlässig. Es ist ein Bruchteil einer Sekunde, wo Sie erscheinen, so weiß, bevor der SVG lädt, aber es ist gut genug für mich.

Etwa so etwas wie:

import React, { View, WebView } from 'react-native'
import s from 'string'

const firstHtml = '<html><head><style>html, body { margin:0; padding:0; overflow:hidden } svg { position:fixed; top:0; left:0; height:100%; width:100% }</style></head><body>'
const lastHtml = '</body></html>'
export default (props) =>
  <View style={props.containerStyle}>
    <WebView
      style={[{ width: 200, height: 100, backgroundColor: props.backgroundColor }, normalizeStyle(props.style)]}
      scrollEnabled={false}
      source={{ html: `${firstHtml}${props.svgContent}${lastHtml}` }}
    />
  </View>

Danke! Ich habe veröffentlicht, ein npm-Paket für diese in react-native-remote-svg

InformationsquelleAutor Sledge Hammer

1

Können Sie die Anzeige kleine SVG-Datei als Daten, die diese Bibliothek nutzen,

Hinweis: Große SVG-Bilder sind nicht korrekt wiedergegeben.

npm reagiere ich-native-remote-svg
```
import Image from 'react-native-remote-svg'

<Image
 source={{
uri: `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" 
width="100px" height="100px"  viewBox="0 0 100 100">
     <ellipse data-custom-shape="ellipse" cx="50" cy="50" rx="50" ry="50" 
fill="green"  stroke="#00FF00" stroke-width ="2" />
   </svg>`
}}
style={{ width: 100, height: 100}}
/>
```
Wenn Sie wollen, um anzuzeigen, die Größe von Bildern aus der Ferne mit über die Bibliothek und dann machen Sie diese,
```
<Image
  source={{ uri: 'https://example.com/my-pic.svg' }}
  style={{ width: 200, height: 532}}
/>
```
Aber wenn Sie verwendet diese für die Anzeige der lokalen svg-Datei, dann werden Sie einige Fragen in android, wenn Sie Bündel und legte den release.
```
import Image from 'react-native-remote-svg'
<Image source={require('./image.svg')} />
```
oder Sie verwenden können, Icomoon (Für kleine SVG-Bilder/Symbole),

Empfohlen: Verwenden Sie Icomoon für Icons und Kleine SVG-Bilder

Sehen diese video, um den setup-icomoon in reagieren nativen
- Verwenden Sie nicht dieses plugin react-native-remote-svg da hat es schwerwiegende Fehler bei Android-im Produktions-Modus. iOS ist gut, obwohl.
- ja. Aber dieser Fehler ist nur für die lokale svg-Bilder. Wenn Sie für remote SVGs dann funktioniert es einwandfrei.
InformationsquelleAutor Asbar Ali

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.