react-native - React Native svg 未正确渲染

Question

我们正在做一个Vue/ReactNative项目，并且有一个奇怪的现象，在Reactnative 组件react-native-svg(版本12.1.0)SVG 无法正确渲染。在浏览器中它可以正确呈现。

SVG 本身是用 Adob​​e 创建的，并使用 CSS 样式。不是所有 CSS 元素都受支持吗？

我们从外部 Uri 动态使用 SVG，而不是作为静态文件。

<svg-css-uri
    :key="'image_' + selectedItem.id"
    :height="200"
    :uri="selectedItem.picture.url"
  ></svg-css-uri>
</view>
    
    
mystyle: {
  marginLeft: 25,
  flex: 0.5,
  justifyContent: "center",
}

应该是这样的

看起来像这样(错误)

Answer 1

通过 react-native-svg 使用 SVG 图像有两种方法

1。转换为 react 组件

您可以使用此 playground 将 svg 图像转换为 React 组件.

注意:也可以通过 CLI 转换图像，但我更喜欢 Playground，因为它更容易。

2。直接使用SVG文件

为此，您可能需要执行文档 here 中提到的步骤