反应本机 svg 未正确呈现

Question

我们正在做一个 Vue/ReactNative 项目，并且有一个奇怪的现象，在 Reactnative 组件 react-native-svg（版本 12.1.0）SVG 未正确呈现。在浏览器中正确呈现。

SVG 本身是用 Adobe 创建的，并使用 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 下 iOS 上渲染 SVG，如下所示： https://www.codepile.net/pile/7AP5vlmn（使用此代码）

使用 https://react-svgr.com/playground/，我将 SVG 转换为 React Native 组件。然后，您可以轻松地从 .js 文件导入和渲染。这是它在 iOS 模拟器上的样子：

Answer 2

有 2 种使用 SVG 图像的方法 react-native-svg

1。转换为 React 组件

您可以使用此 playground.

将 svg 图像转换为 React 组件

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

2。直接使用 SVG 文件

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

反应本机 svg 未正确呈现

React native svg not rendered correct

react-native

react-native-svg

1。转换为 React 组件

2。直接使用 SVG 文件