React Native & Expo - SVG wird nicht auf iOS-Gerät rendern

Question

Ich habe ein Projekt mit 'create-react-native-app' gestartet und ich kann nicht herausfinden, wie .svg-Dateien zu rendern. Ich versuchte alle Bibliotheken für Svg wie react-native-Svg-URI, reagieren-native-Svg-Bild, msvgc (Konvertierung von. Svg Komponenten mit react-native-Svg reagieren) und keiner dieser hilft. Manchmal, wenn ich App-Vorschau (mit Expo) auf meinem Handy ausführen, stürzt es sofort ab und manchmal zeigt es nur Lade-Animation - anstatt tatsächliche .svg Bild anzuzeigen. Es gibt keine Fehler - es wird Svgs einfach nicht rendern.

Zum Beispiel dieser Code zeigt loading animation

import SVGImage from 'react-native-svg-image'; 

<View style={styles.slide1}> 

     <SVGImage 
     style={{ width: 80, height: 80 }} 
     source={{uri:'https://fluent-panda.appspot.com.storage.googleapis.com/dumbbell.svg'}} 
     /> 

     <Text style={styles.text}>Hello</Text> 
</View> 

Vielen Dank im Voraus!

Answer 1

Dies scheint ein Problem mit der react-native-svg-Bildbibliothek zu sein, die nicht auf iOS getestet wird. Wenn Sie die html Prop auf einem WebView auf iOS verwenden, können Sie startInLoadingState={true} nicht festlegen, andernfalls wird der Ladeindikator nie gelöscht. Dies ist ein Verhalten, das schon lange in react-native existiert, siehe issue 542 für weitere Informationen - es ist sicherlich nicht ideal, und hoffentlich liest jemand dies und behebt es!

Sie können dies umgehen, indem Sie auf der Komponente showWebviewLoader prop auf false setzen.

<SVGImage 
     showWebviewLoader={false} 
     style={{ width: 80, height: 80 }} 
     source={{uri:'https://fluent-panda.appspot.com.storage.googleapis.com/dumbbell.svg'}} 
    />