如何在 React Native 上显示 SVG 文件? [英] How to show SVG file on React Native?
本文介绍了如何在 React Native 上显示 SVG 文件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想显示 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>
我也知道 react native 基本上不支持 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:
- 使用 https://svg2jsx.herokuapp.com/<将
.svg
图像转换为 JSX/a> - 使用 https://svgr.now 将 JSX 转换为
react-native-svg
组件.sh/(选中React Native 复选框)
- Convert
.svg
image to JSX with https://svg2jsx.herokuapp.com/ - Convert the JSX to
react-native-svg
component with https://svgr.now.sh/ (check the "React Native checkbox)
这篇关于如何在 React Native 上显示 SVG 文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文