如何在 React Native 上显示 SVG 文件？

Question

我想显示 svg 文件（我有一堆 svg 图像）但是我找不到显示的方式。我尝试使用 react-native-svg 的 Image 和 Use 组件，但它们不适用于该组件。我试图用原生方式做到这一点，但只显示 svg 图像真的很难。

示例代码：

import Svg, {
  Use,
  Image,
} from 'react-native-svg';

<View>
  <Svg width="80" height="80">
     <Image href={require('./svg/1f604.svg')} />
  </SvgRn>
</View>

我也知道 react native 基本上不支持 svg，但我认为有人用棘手的方式解决了这个问题（有/没有 react-native-svg）

原文由 the_bluescreen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我使用了以下解决方案：

1. 使用 https://svg2jsx.herokuapp.com/ 将 .svg 图像转换为 JSX
2. 使用 https://react-svgr.com/playground/?native=true 将 JSX 转换为 react-native-svg 组件（确保选中“React Native”复选框）

原文由 Ihor Burlachenko 发布，翻译遵循 CC BY-SA 4.0 许可协议