我想显示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)
发布于 2018-10-05 18:31:58
我使用了以下解决方案:
使用https://svg2jsx.herokuapp.com/
.svg
图像转换为JSX (选中"React Native“复选框)发布于 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}
/>
);
https://stackoverflow.com/questions/38830568
复制相似问题