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

Posted 2023-02-19

【中文标题】React Native 和 Expo - SVG 不会在 iOS 设备上呈现

【英文标题】：React Native & Expo - SVG won't render on iOS device

【发布时间】：2017-10-04 09:18:49

【问题描述】：

我已经使用“create-react-native-app”启动了一个项目，但我不知道如何渲染 .svg 文件。我尝试了 all 用于 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>

提前谢谢你！

【参考方案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'
    />