如何在React Native上显示SVG文件？ [英] How to show SVG file on React Native?

问题描述

我想显示svg文件（我有一堆svg图像），但我找不到显示的方式。我尝试使用图片和使用 react-native-svg 但他们不能使用它。我尝试用原生方式做到这一点，但显示svg图像真的很难。

I want to show svg files (I have bunch of svg images) but the thing I couldn't find the way to show. I tried to use Image and Use components of react-native-svg but they don't work with that. And I tried to do that with native way but it's really hard work to show just svg image.

示例代码：

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

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

另外我知道本机反应原理基本上不支持svg但是我认为有人用棘手的方法修复了这个问题方式（有/没有react-native-svg）

Also I know the react native doesn't support svg basically but I think someone fixed this problem with tricky way (with/without react-native-svg)

推荐答案

我使用了以下解决方案：

I used the following solution:

1. 使用 https：//svg2jsx.herokuapp将.svg图像转换为JSX .com /


2. 使用 react-native-svg 组件/svgr.now.sh/\"rel =noreferrer> https://svgr.now.sh/ （查看React Native复选框）

1. Convert .svg image to JSX with https://svg2jsx.herokuapp.com/
2. Convert the JSX to react-native-svg component with https://svgr.now.sh/ (check the "React Native checkbox)

这篇关于如何在React Native上显示SVG文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！