React Native＆Expo - SVG不会在iOS设备上渲染

Question

我已经开始使用'create-react-native-app'创建一个项目，我无法弄清楚如何渲染.svg文件。我尝试了全部库像react-native-svg-uri，react-native-svg-image，msvgc（转换.svg与react-native-svg反应组件），这些都无济于事。 有时当我在手机上运行应用程序预览（使用expo）时，它立即崩溃，有时它只显示加载动画 - 而不是显示实际的.svg图像。 没有错误 - 它根本不会渲染svgs。

例如，此代码显示加载动画

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> 

预先感谢您！

Answer 1

这似乎是未在iOS上测试react-native-svg-image库的问题。当您在iOS上的WebView上使用html支柱时，您无法设置startInLoadingState={true}，否则加载指示符永不消失。这是一个在react-native中已经存在很长时间的行为，请参阅issue 542以获取更多信息 - 尽管这当然不是理想的，但希望有人阅读并修复它！

您可以通过在零部件上设置showWebviewLoader支柱到false来解决此问题。

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