React Native 和 Expo - SVG 不会在 iOS 设备上呈现

Question

我已经使用 'create-react-native-app' 开始了一个项目，但我不知道如何渲染 .svg 文件。我尝试了 all svg 库，如 react-native-svg-uri、react-native-svg-image、msvgc（将 .svg 转换为反应组件与 react-native-svg）和 none 这些帮助。有时，当我运行在我的 phone 上预览应用程序（带有 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'}}
    />

React Native 和 Expo - SVG 不会在 iOS 设备上呈现

React Native & Expo - SVG won't render on iOS device

svg

reactjs

react-native

expo

create-react-native-app