我正在尝试使用react-native-svg库在react-native中加载本地svg文件,我已经安装了它,但是我不知道如何使用本地svg文件。该文件位于“ ./assets/bg.svg”中,我正在使用expo。如果您知道的话,请写下确切的代码。
Website.js
import Svg, {
G,
Path,
Use,
Defs,
LinearGradient,
Stop,
Mask,
} from 'react-native-svg';
/* Use this if you are using Expo
import * as Svg from 'react-native-svg';
const { Circle, Rect } = Svg;
*/
import React from 'react';
import {View, StyleSheet} from 'react-native';
export default class SvgExample extends React.Component {
render() {
return (
<View
style={[
StyleSheet.absoluteFill,
{alignItems: 'center', justifyContent: 'center'},
]}>
<Svg
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
width={100}
height={100}
viewBox="0 0 100 100">
<Defs>
<LinearGradient
id="background-gradient"
x1="0"
y1="0"
y2="1"
x2="0">
<Stop stopColor="#fff" offset="0%" />
<Stop stopColor="#000" offset="100%" />
</LinearGradient>
<LinearGradient id="picture-gradient" x1="0" y1="0" y2="1" x2="0">
<Stop stopColor={this.props.color} offset="0%" />
<Stop stopColor={this.props.color} offset="100%" />
</LinearGradient>
</Defs>
<G transform="translate(50 50) translate(0 0) scale(0.5) translate(-50 -50)">
<G fill="url(#picture-gradient)">
<G transform="scale(2.0833333333333335) translate(0 -0.10000300407409668)">
<Path d="M14.1 14.5c.1-.3.2-.5.6-.4-.1-.2-.3-.5-.4-.7-.1-.2-.2-.4-.1-.6.2-.9-.1-1.6-.4-2.4-.1-.3-.4-.8-1-.7-.4-.5-.6.1-1 .2-.5.1-1 .2-1.6.3-.1 0-.2-.1-.2-.2.5-.1 1-.3 1.5-.4l-.2-.2c.2-.3.3-.5.4-.7.2-.2.4-.4.6-.3.4 0 .5-.1.5-.5 0 0 0-.1.1-.2.4.3.7.1.9-.3.1-.2 1.1-.3 1.3-.1.3.2.6.5.8.8.1.2.3.2.5.2.8-.2 1.5.2 2 .7.2.2.5.2.7.3.5-.6 1.2.2 1.7-.2l-.1-.1c-.1-.1-.3-.3-.3-.4 0-.7.1-.8.8-.6.3.1.6 0 .7.4.1.2.4.3.6.5.1.1.2.2.2.3 0 .1-.1.3-.2.4-.6.2-.9.8-1.3 1.2-.4.5-.2 1.1.4 1.3.4.1.8.2 1.3.3.4.1.6.2.7.6.1.5.4.7.8.5 0-.1-.1-.3-.1-.4-.1-.3-.3-.5 0-.8.2-.2.1-.4-.1-.6 0-.2-.2-.5-.2-.7-.1-.5.1-.7.6-.6.4 0 .8.1 1 .4.1.1.3.3.4.3.1 0 .2-.3.3-.5l.9.6c.4.2.7.5 1.1.7.3.2.7.3.7.7 0 .4-.3.7-.8.7-.7.1-1.1.5-1.3 1.2l.5-.5c.4-.4.6-.4.8.1.2.4.4.6.9.5v.1c-.2.2-.4.5-.6.8-.1-.2-.2-.3-.2-.5-.3.3-.7.4-.8.8H43C39.8 8.5 32.5 3.3 24 3.3S8.2 8.4 5 15.8h8.5c.2-.4.4-.9.6-1.3zm13.7-4.7c.1.1-.1.3-.1.6-.6-.2-1.2-.3-1.9-.5.2-.2.4-.4.6-.7-.3 0-.5 0-.8-.1-.3-.7-1-.2-1.6-.4-.1 0-.3-.2-.4-.3 0-.1.1-.4.2-.4.2-.1.5-.1.7-.1.4.1.9.2 1.3.4.6.2 1.1.4 1.7.7.1.1.2.3.3.5h-.6c.3 0 .5.1.6.3zm-2.7-4.3c.2 0 .3-.1.4-.1.9.2 1.8.2 2.7.7.3.2.6.4.9.5.3.1.5.2.8.3.4.2.4.4.2.8.2.1.3.3.4.4-.2.4-.1.7.2 1 .2.2.3.4.5.6-.6.3-1.1 0-1.5-.2l-.9-.6c-.2-.2-.4-.5-.6-.8 0 .1-.1 0-.2-.1-.4-.2-.8-.5-1.3-.7-.3-.1-.7-.2-1.1-.2-.5 0-.7-.2-.8-.7 0-.1-.1-.3-.1-.5.2 0 .3-.1.5-.1 0 0-.1-.1-.1-.3zm-.8.4c.3-.1.5.1.4.4-.1.8-.3 1-1.1.9.1-.3.1-.5.2-.7-.2-.1-.3-.1-.4-.2v-.1c.2-.2.5-.3.9-.3zm12.9 28c-.2.4-.4.8-.5 1.2-.3.8-1.2 1.2-1.8 1.7-.1.1-.3.2-.4.4-.6 1.1-1.6 1.8-2.4 2.6-.1.1-.3.1-.4.2-.2.2-.4.3-.7.5-.1.1-.1.2-.2.2-.6.3-1.3.6-1.9 1l-1.2.9c-.2.1-.4.3-.6.5-.2.2-.5.2-.6.6 0 .1-.3.2-.4.2-.2 0-.5 0-.8-.1.3-.4.5-.7.8-1 .2-.2.4-.4.5-.7 0-.3.3-.5.5-.7 1-1.2 1.7-2.6 1.9-4.2 0-.3 0-.4-.2-.5h-.1c-.9-.3-1.6-.9-1.9-1.9-.1-.4-.5-.7-.8-1-.4-.4-.4-.7-.1-1.1.1-.1.1-.2.1-.3H5c3.2 7.3 10.5 12.5 19 12.5s15.8-5.1 19-12.5h-5c-.2.3-.5.9-.8 1.5zm9.1-16.8H1.7c-1 0-1.7.8-1.7 1.7v10.3c0 .9.8 1.7 1.7 1.7h44.6c1 0 1.7-.8 1.7-1.7V18.8c0-.9-.8-1.7-1.7-1.7zm-27.7 4.4l-1.2 5c-.1.3-.2.6-.2.7-.1.2-.2.3-.3.4-.1.1-.3.2-.6.2-.2 0-.4-.1-.5-.2-.1-.1-.2-.2-.3-.4-.1-.1-.1-.4-.2-.7l-1.2-4.4-1.2 4.4c-.1.3-.2.6-.2.7-.1.1-.2.3-.3.4-.1.1-.3.2-.5.2s-.3 0-.5-.1l-.3-.3c-.1-.1-.1-.3-.2-.4 0-.2-.1-.3-.1-.5l-1.2-5c-.1-.3-.1-.5-.1-.7 0-.2.1-.4.2-.5.1-.1.3-.2.5-.2.3 0 .5.1.6.3.1.2.2.4.2.8l1 4.3 1.1-4c.1-.3.2-.5.2-.7.1-.2.2-.3.3-.4.1-.1.3-.2.6-.2s.4.1.6.2c.1.1.2.3.3.4.1.1.1.4.2.7l1.1 4 1-4.3c0-.2.1-.4.1-.5 0-.1.1-.2.2-.3.1-.1.3-.2.4-.2.2 0 .4.1.5.2.1.1.2.3.2.5-.1.1-.1.3-.2.6zm10 0l-1.2 5c-.1.3-.2.6-.2.7-.1.2-.2.3-.3.4s-.3.2-.6.2c-.2 0-.4-.1-.5-.2-.1-.1-.2-.2-.3-.4-.1-.1-.1-.4-.2-.7L24 22.1l-1.2 4.4c-.1.3-.2.6-.2.7-.1.1-.2.3-.3.4-.1.1-.3.2-.5.2s-.3 0-.5-.1l-.3-.3c-.1-.1-.1-.3-.2-.4 0-.2-.1-.3-.1-.5l-1.2-5c-.1-.3-.1-.5-.1-.7 0-.2.1-.4.2-.5.1-.1.3-.2.5-.2.3 0 .5.1.6.3.1.2.2.4.2.8l1 4.3 1.1-4c.1-.3.2-.5.2-.7.1-.2.2-.3.3-.4.1-.1.3-.2.6-.2s.4.1.6.2c.1.1.2.3.3.4.1.1.1.4.2.7l1.1 4 1-4.3c0-.2.1-.4.1-.5 0-.1.1-.2.2-.3.1-.1.3-.2.4-.2.2 0 .4.1.5.2.1.1.2.3.2.5 0 .1-.1.3-.1.6zm9.9 0l-1.2 5c-.1.3-.2.6-.2.7-.1.2-.2.3-.3.4-.1.1-.3.2-.6.2-.2 0-.4-.1-.5-.2-.1-.1-.2-.2-.3-.4s-.1-.4-.2-.7L34 22.1l-1.2 4.4c-.1.3-.2.6-.2.7-.1.1-.2.3-.3.4-.1.1-.3.2-.6.2-.2 0-.3 0-.5-.1l-.3-.3c-.1-.1-.1-.3-.2-.4 0-.2-.1-.3-.1-.5l-1.2-5c-.1-.3-.1-.5-.1-.7 0-.2.1-.4.2-.5.1-.1.3-.2.5-.2.3 0 .5.1.6.3.1.2.2.4.2.8l1 4.3 1.1-4c.1-.3.2-.5.2-.7.1-.2.2-.3.3-.4.1-.1.3-.2.6-.2s.4.1.6.2c.1.1.2.3.3.4.1.1.1.4.2.7l1.1 4 1-4.3c0-.2.1-.4.1-.5 0-.1.1-.2.2-.3.1-.1.3-.2.4-.2.2 0 .4.1.5.2.1.1.2.3.2.5 0 .1 0 .3-.1.6z" />
</G>
</G>
</G>
</Svg>
</View>
);
}
}
在其他文件中
import Website from '../../components/svg/Website';
...
render() {
return (
<View>
<Website
width={windowWidth / 8}
height={windowWidth / 8}
color={this.props.brand.headerColor}
/>
</View>
)
}
如果这对您不起作用,那么请尝试这种方式
import * as React from 'react';
import SvgUri from 'react-native-svg-uri';
import testSvg from './test.svg';
export default () => (
<SvgUri
width="200"
height="200"
svgXmlData={testSvg}
/>
);
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。