反应原生 svg 未正确呈现

时间:2021-03-24 19:54:11

标签: react-native react-native-svg

我们正在开发一个 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",
}

应该是这样的

enter image description here

看起来像这样(错误)

enter image description here

2 个答案:

答案 0 :(得分:1)

我能够在 iOS 上的 React Native 下渲染 SVG,如下所示: https://www.codepile.net/pile/7AP5vlmn(使用此代码)

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

enter image description here

答案 1 :(得分:1)

使用 react-native-svg

有两种使用 SVG 图像的方法

1.转换为反应组件

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

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

2.直接使用SVG文件

为此,您可能需要执行文档 here

中提到的步骤