如何在React Native上显示SVG文件？
如何在React Native上显示SVG文件？
提问于 2016-08-08 21:31:18
我想显示svg文件(我有一堆svg图像)，但是我找不到显示的方法。我试着使用图片，和使用的组件，但是他们不能工作。我试着用原生的方式来做这件事，但是仅仅显示svg图像真的很难。
示例代码：
import Svg, {
Use,
Image,
} from 'react-native-svg';
<View>
<Svg width="80" height="80">
<Image href={require('./svg/1f604.svg')} />
</SvgRn>
</View>此外，我知道react原生版本基本上不支持svg，但我认为有人用棘手的方式修复了这个问题(使用/不使用react- native -svg)
回答 18
Stack Overflow用户
发布于 2018-10-05 18:31:58
我使用了以下解决方案：
使用https://svg2jsx.herokuapp.com/
- Convert JSX to https://svgr.now.sh/组件将
.svg图像转换为JSX (选中"React Native“复选框)
Stack Overflow用户
发布于 2018-01-14 09:07:34
我发布了另一个解决方案(react--vector- here )here。这种方法使用矢量字体(来自SVG)，而不是SVG文件。PS: react-native-vector-icons是在react-native中处理SVG的最好方法，它也适用于iOS和android。您将能够更改矢量图标的颜色和大小。
如果你想将svg直接插入到你的应用中，你可以尝试第三方的库: react-native-svg。在github中有超过3k的星星，这是最好的方法之一。
使用npm安装其中的任意一个
然后将其链接到本机，使用
react-native link react-native-svg使用react-native-svg-uri的示例
import * as React from 'react';
import SvgUri from 'react-native-svg-uri'; // SVG Package
import testSvg from './test.svg'; // SVG File
export default () => (
<SvgUri
width="200"
height="200"
svgXmlData={testSvg}
/>
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38830568
复制相关文章
相似问题