开发者社区> 问答> 正文

如何使用react-native-svg库加载本地svg文件

我正在尝试使用react-native-svg库在react-native中加载本地svg文件,我已经安装了它,但是我不知道如何使用本地svg文件。该文件位于“ ./assets/bg.svg”中,我正在使用expo。如果您知道的话,请写下确切的代码。

展开
收起
Puppet 2020-01-06 14:53:52 2069 0
1 条回答
写回答
取消 提交回答
  • 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}
      />
    );
    
    2020-01-06 14:54:36
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
React Native 全量化实践 立即下载
React在大型后台管理项目中的工程实践 立即下载