在React-native中使用SVG详细过程

最新推荐文章于 2024-09-10 10:04:23 发布
最新推荐文章于 2024-09-10 10:04:23 发布
阅读量7.3k 收藏 9
点赞数
分类专栏： React-native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42341232/article/details/108900967
版权

首先React-native不能直接引入SVG图片，所以我们要借助两个库来实现，废话不多说，下面直接给出详细过程

1 . 安装react-native-svg（参考我的package.json文件）
在这里插入图片描述
2.下载你喜欢的SVG图片，可在阿里图标库慢慢挑选，然后放在一个文件夹里面，加粗的目的是因为后面要用这个文件夹的名字，一般用svgs吧
在这里插入图片描述
3.将svg处理成一个js文件，因为稍后要用到的react-native-svg-uri这个库虽然可以直接使用文件路径的方式引入，但是在安卓下有bug，具体自行百度，这个js文件也可以百度获得，使用node处理的，会将svg图片处理成key：value的键值对，比较简单，具体代码如下，这里取名叫做getSvg.js(看你喜欢取什么取什么)

//导入node的文件模块
var fs = require('fs');
var path = require('path');
//定义想要处理的svg文件夹路径
const svgDir = path.resolve(__dirname, './svgs');

// 读取单个文件
function readfile(filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(path.join(svgDir, filename), 'utf8', function(err, data) {
      console.log(data.replace(/<\?xml.*?\?>|<\!--.*?-->|<!DOCTYPE.*?>/g, ''));
      if (err) reject(err);
      resolve({
        [filename.slice(0, filename.lastIndexOf('.'))]: data,
      });
    });
  });
}

// 读取SVG文件夹下所有svg
function readSvgs() {
  return new Promise((resolve, reject) => {
   fs.readdir(svgDir, function(err, files) {
     if (err) reject(err);
     Promise.all(files.map(filename => readfile(filename)))
      .then(data => resolve(data))
      .catch(err => reject(err));
   });
  });
}

// 在当前的目录下生成svgs.js
readSvgs().then(data => {
  let svgFile = 'export default ' + JSON.stringify(Object.assign.apply(this, data));
  fs.writeFile(path.resolve(__dirname, './svgs.js'), svgFile, function(err) {
    if(err) throw new Error(err);
  })
}).catch(err => {
    throw new Error(err);
  });

4.上面两步走完之后你的文件夹里面应该有这些东西，一个svg图片集合，一个处理svg的脚本文件
在这里插入图片描述
5.打开控制台运行getSvg.js脚本

node getSvg.js

在这里插入图片描述
运行完毕后的目录结构是这样的
在这里插入图片描述
6.去react-native-svg-uri的github下载源码地址在这儿，但是这个库年代久远了，好多东西已经过期了，而且不能和最新版react-native-svg配合了，好在这个库非常简单且不依赖于其他库，所以我们下载他的源码自己改造一下
在这里插入图片描述
观察可知，这个库的核心就是这两个文件，首先针对index.js文件进行改造，改造就是删除了构造器函数，将state简写了，修改过期的生命周期函数的名字，还有就是导入utils时我改了个名字，改成了svgUriUtils下面就是修改后的代码

import React, {Component} from 'react';
import {View} from 'react-native';
import PropTypes from 'prop-types';
import xmldom from 'xmldom';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';

import Svg, {
  Circle,
  Ellipse,
  G,
  LinearGradient,
  RadialGradient,
  Line,
  Path,
  Polygon,
  Polyline,
  Rect,
  Text,
  TSpan,
  Defs,
  Stop,
} from 'react-native-svg';

import * as utils from './svgUriUtils';

const ACCEPTED_SVG_ELEMENTS = [
  'svg',
  'g',
  'circle',
  'path',
  'rect',
  'defs',
  'line',
  'linearGradient',
  'radialGradient',
  'stop',
  'ellipse',
  'polygon',
  'polyline',
  'text',
  'tspan',
];

// Attributes from SVG elements that are mapped directly.
const SVG_ATTS = ['viewBox', 'width', 'height'];
const G_ATTS = ['id'];

const CIRCLE_ATTS = ['cx', 'cy', 'r'];
const PATH_ATTS = ['d'];
const RECT_ATTS = ['width', 'height'];
const LINE_ATTS = ['x1', 'y1', 'x2', 'y2'];
const LINEARG_ATTS = LINE_ATTS.concat(['id', 'gradientUnits']);
const RADIALG_ATTS = CIRCLE_ATTS.concat(['id', 'gradientUnits']);
const STOP_ATTS = ['offset'];
const ELLIPSE_ATTS = ['cx', 'cy', 'rx', 'ry'];

const TEXT_ATTS = ['fontFamily', 'fontSize', 'fontWeight', 'textAnchor'];

const POLYGON_ATTS = ['points'];
const POLYLINE_ATTS = ['points'];

const COMMON_ATTS = [
  'fill',
  'fillOpacity',
  'stroke',
  'strokeWidth',
  'strokeOpacity',
  'opacity',
  'strokeLinecap',
  'strokeLinejoin',
  'strokeDasharray',
  'strokeDashoffset',
  'x',
  'y',
  'rotate',
  'scale',
  'origin',
  'originX',
  'originY',
  'transform',
  'clipPath',
];

let ind = 0;

function fixYPosition(y, node) {
  if (node.attributes) {
    const fontSizeAttr = Object.keys(node.attributes).find(
      (a) => node.attributes[a].name === 'font-size',
    );
    if (fontSizeAttr) {
      return (
        '' + (parseFloat(y) - parseFloat(node.attributes[fontSizeAttr].value))
      );
    }
  }
  if (!node.parentNode) {
    return y;
  }
  return fixYPosition(y, node.parentNode);
}

class SvgUri extends Component {
  state = {
    fill: this.props.fill,
    svgXmlData: this.props.svgXmlData,
    createSVGElement: this.createSVGElement.bind(this),
    obtainComponentAtts: this.obtainComponentAtts.bind(this),
    inspectNode: this.inspectNode.bind(this),
    fetchSVGData: this.fetchSVGData.bind(this),
    isComponentMounted: false,
    // Gets the image data from an URL or a static file
  };

  componentDidMount() {
    if (this.props.source) {
      console.log(this.props);
      const source = resolveAssetSource(this.props.source) || {};
      this.fetchSVGData(source.uri);
    }
    this.setState({
      isComponentMounted: true,
    });
    // this.isComponentMounted = true;
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.source) {
      const source = resolveAssetSource(nextProps.source) || {};
      const oldSource = resolveAssetSource(this.props.source) || {};
      if (source.uri !== oldSource.uri) {
        this.fetchSVGData(source.uri);
      }
    }

    if (nextProps.svgXmlData !== this.props.svgXmlData) {
      this.setState({svgXmlData: nextProps.svgXmlData});
    }

    if (nextProps.fill !== this.props.fill) {
      this.setState({fill: nextProps.fill});
    }
  }

  componentWillUnmount() {
    this.isComponentMounted = false;
  }

  async fetchSVGData(uri) {
    let responseXML = null,
      error = null;
    try {
      const response = await fetch(uri);
      responseXML = await response.text();
    } catch (e) {
      error = e;
      console.error('ERROR SVG', e);
    } finally {
      if (this.isComponentMounted) {
        this.setState({svgXmlData: responseXML}, () => {
          const {onLoad} = this.props;
          if (onLoad && !error) {
            onLoad();
          }
        });
      }
    }

    return responseXML;
  }

  // Remove empty strings from children array
  trimElementChilden(children) {
    for (child of children) {
      if (typeof child === 'string') {
        if (child.trim().length === 0)
          children.splice(children.indexOf(child), 1);
      }
    }
  }

  createSVGElement(node, childs) {
    this.trimElementChilden(childs);
    let componentAtts = {};
    const i = ind++;
    switch (node.nodeName) {
      case 'svg':
        componentAtts = this.obtainComponentAtts(node, SVG_ATTS);
        if (this.props.width) {
          componentAtts.width = this.props.width;
        }
        if (this.props.height) {
          componentAtts.height = this.props.height;
        }

        return (
          <Svg key={i} {...componentAtts}>
            {childs}
          </Svg>
        );
      case 'g':
        componentAtts = this.obtainComponentAtts(node, G_ATTS);
        return (
          <G key={i} {...componentAtts}>
            {childs}
          </G>
        );
      case 'path':
        componentAtts = this.obtainComponentAtts(node, PATH_ATTS);
        return (
          <Path key={i} {...componentAtts}>
            {childs}
          </Path>
        );
      case 'circle':
        componentAtts = this.obtainComponentAtts(node, CIRCLE_ATTS);
        return (
          <Circle key={i} {...componentAtts}>
            {childs}
          </Circle>
        );
      case 'rect':
        componentAtts = this.obtainComponentAtts(node, RECT_ATTS);
        return (
          <Rect key={i} {...componentAtts}>
            {childs}
          </Rect>
        );
      case 'line':
        componentAtts = this.obtainComponentAtts(node, LINE_ATTS);
        return (
          <Line key={i} {...componentAtts}>
            {childs}
          </Line>
        );
      case 'defs':
        return <Defs key={i}>{childs}</Defs>;
      case 'linearGradient':
        componentAtts = this.obtainComponentAtts(node, LINEARG_ATTS);
        return (
          <LinearGradient key={i} {...componentAtts}>
            {childs}
          </LinearGradient>
        );
      case 'radialGradient':
        componentAtts = this.obtainComponentAtts(node, RADIALG_ATTS);
        return (
          <RadialGradient key={i} {...componentAtts}>
            {childs}
          </RadialGradient>
        );
      case 'stop':
        componentAtts = this.obtainComponentAtts(node, STOP_ATTS);
        return (
          <Stop key={i} {...componentAtts}>
            {childs}
          </Stop>
        );
      case 'ellipse':
        componentAtts = this.obtainComponentAtts(node, ELLIPSE_ATTS);
        return (
          <Ellipse key={i} {...componentAtts}>
            {childs}
          </Ellipse>
        );
      case 'polygon':
        componentAtts = this.obtainComponentAtts(node, POLYGON_ATTS);
        return (
          <Polygon key={i} {...componentAtts}>
            {childs}
          </Polygon>
        );
      case 'polyline':
        componentAtts = this.obtainComponentAtts(node, POLYLINE_ATTS);
        return (
          <Polyline key={i} {...componentAtts}>
            {childs}
          </Polyline>
        );
      case 'text':
        componentAtts = this.obtainComponentAtts(node, TEXT_ATTS);
        return (
          <Text key={i} {...componentAtts}>
            {childs}
          </Text>
        );
      case 'tspan':
        componentAtts = this.obtainComponentAtts(node, TEXT_ATTS);
        if (componentAtts.y) {
          componentAtts.y = fixYPosition(componentAtts.y, node);
        }
        return (
          <TSpan key={i} {...componentAtts}>
            {childs}
          </TSpan>
        );
      default:
        return null;
    }
  }

  obtainComponentAtts({attributes}, enabledAttributes) {
    const styleAtts = {};

    if (this.state.fill && this.props.fillAll) {
      styleAtts.fill = this.state.fill;
    }

    Array.from(attributes).forEach(({nodeName, nodeValue}) => {
      Object.assign(
        styleAtts,
        utils.transformStyle({
          nodeName,
          nodeValue,
          fillProp: this.state.fill,
        }),
      );
    });

    const componentAtts = Array.from(attributes)
      .map(utils.camelCaseNodeName)
      .map(utils.removePixelsFromNodeValue)
      .filter(utils.getEnabledAttributes(enabledAttributes.concat(COMMON_ATTS)))
      .reduce((acc, {nodeName, nodeValue}) => {
        acc[nodeName] =
          this.state.fill && nodeName === 'fill' && nodeValue !== 'none'
            ? this.state.fill
            : nodeValue;
        return acc;
      }, {});
    Object.assign(componentAtts, styleAtts);

    return componentAtts;
  }

  inspectNode(node) {
    // Only process accepted elements
    if (!ACCEPTED_SVG_ELEMENTS.includes(node.nodeName)) {
      return <View />;
    }

    // Process the xml node
    const arrayElements = [];

    // if have children process them.
    // Recursive function.
    if (node.childNodes && node.childNodes.length > 0) {
      for (let i = 0; i < node.childNodes.length; i++) {
        const isTextValue = node.childNodes[i].nodeValue;
        if (isTextValue) {
          arrayElements.push(node.childNodes[i].nodeValue);
        } else {
          const nodo = this.inspectNode(node.childNodes[i]);
          if (nodo != null) {
            arrayElements.push(nodo);
          }
        }
      }
    }

    return this.createSVGElement(node, arrayElements);
  }

  render() {
    try {
      if (this.state.svgXmlData == null) {
        return null;
      }

      const inputSVG = this.state.svgXmlData
        .substring(
          this.state.svgXmlData.indexOf('<svg '),
          this.state.svgXmlData.indexOf('</svg>') + 6,
        )
        .replace(/<!-(.*?)->/g, '');

      const doc = new xmldom.DOMParser().parseFromString(inputSVG);

      const rootSVG = this.inspectNode(doc.childNodes[0]);

      return <View style={this.props.style}>{rootSVG}</View>;
    } catch (e) {
      console.error('ERROR SVG', e);
      return null;
    }
  }
}

SvgUri.propTypes = {
  style: PropTypes.object,
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  svgXmlData: PropTypes.string,
  source: PropTypes.any,
  fill: PropTypes.string,
  onLoad: PropTypes.func,
  fillAll: PropTypes.bool,
};

module.exports = SvgUri;

接下来直接复制utils过来就行了，如果直接复制我的全部代码，你可能要注意一下utils的导入路径和它的名字就行了

7.最后我们封装一个svg组件出来，这个百度可以找到，我这里是其中一份比较简单的，你可以自己定制，唯一要注意的就是两个导入的文件，第一个是刚才我们到github下载并改造的index文件，命名自己喜欢，第二个导入就是我们使用脚本生成的svg的js文件合集

/*
 * @Description:svg组件
 * @Autor: ZmSama
 * @Date: 2020-10-02 11:09:58
 */
// Svg.js
import React, {Component} from 'react';
import SvgUri from '../utils/svgUri';
import svgs from '../assets/svgs';

export default class Svg extends Component {
  render() {
    const {color, size, style, icon} = this.props;
    console.log(color);

    let svgXmlData = svgs[icon];

    if (!svgXmlData) {
      let err_msg = `没有"${icon}"这个icon，请下载最新的icomoo并 npm run build-js`;
      throw new Error(err_msg);
    }
    return (
      <SvgUri
        width={size}
        height={size}
        svgXmlData={svgXmlData}
        fill={color}
        style={style}
      />
    );
  }
}

8.最后在任意组件导入SVG并使用即可，这里要注意的地方就是，icon填入的字符串是我们用脚本生成的js中导出对象的key值（自己可以打开生成的脚本文件查看一下，建议先用vscode格式化一下，不然很乱看不出什么东西），其实就是svg的文件名字（这里我的是仓库管理），还有就是SVG是导入我们自己封装的不要导入react-native-svg的，切记。
在这里插入图片描述
效果
在这里插入图片描述

全部的过程就在这里了，希望能帮到要使用的朋友们

廖子默
关注
专栏目录
React Native svg入门
慕天远的博客
09-12 1293
首先安装并链接该库 yarn add react-native-svg react-native link react-native-svg 常用模块 类型 描述 Svg 承载绘图区域 Circle 圆 Eclipse 椭圆 G 包裹块（个人认为是为了单纯的层次分明） LinearGradient 线性渐变，可以做颜色的线性渐变效果 ...
react-native使用SVG
qq_44041897的博客
04-28 1362
这是运行后的结果数字
如何在React Native中使用SVG
xuxian的博客
08-06 1316
在React Native中使用SVG(可缩放矢量图形)可以大大提升应用程序视觉效果的质量。SVG具有分辨率独立性,可以在不损失质量的情况下进行缩放,这使它成为图标、标志和插图的绝佳选择。在本博客中,我们将探讨如何在React Native中使用SVG,并提供示例代码和有用资源的参考。要在React Native中使用SVG,我们将使用react-native-svg库。该库为React Native提供SVG支持,允许您将SVG文件作为React组件使用。
ReactNative 引入SVG图片
夏目三三
07-04 5690
一、将所有的SVG内容，打包到js文件中，以key-value的形式存储。1.使用脚本将所有SVG资源打包，脚本来源：react-native icon解决方案（svg）生成getSvg.js文件（脚本代码如下），与SVG文件夹放在同一级，并根据需要修改其中参数。如SVG路径：./svgs ，修改成自己的文件夹路径及名称；导出的目标文件：./Svgs.js 可以修改名称。// getSvg.js...
React Native SVG 使用教程
最新发布
gitblog_00477的博客
09-10 327
React Native SVG 使用教程 react-native-svgSVG library for React Native, React Native Web, and plain React web projects.项目地址:https://gitcode.com/gh_mirrors/re/react-native-svg 1、项目介绍 react-native-svg 是一个用...
react-native-svg,用于react native的svg库。.zip
09-25
react native svg为ios和android上的react native提供svg支持，并为web提供兼容层。
ReactNative 工程使用Svg
m0_55599312的博客
02-08 765
ReactNative` 中会用`Svg`作为一个比较普遍的需求，带大家来实现。我们都知道设计在出图的时候，会有区分一倍多倍图。这样就带来了一个问题，在大屏幕使用小图的时候出现图片模糊失真的情况发生。这时候 Svg 使用是一个很好方案，下面已RN工程为例。
在React-Native中使用Svg
AnitaSun的博客
03-28 528
从网站上获取Svg的方法 地址： https://www.iconfont.cn/ 找到你想要的图标 点击下载之后就下载到了本地 然后点击我的项目 把刚才的图标上传图标至项目，然后点击下载到本地 复制黄色的代码 在代码中使用 import SvgUri from 'react-native-svg-uri'; const female='<svg ......'; <SvgUri width="23" height="23" svgXmlData={female} /&g
React Native中如何使用react-native-svg加载本地svg矢量图片?
qq_20825669的博客
10-23 1516
1.下载react-native-svg库2. 下载安装react-native-svg-transformer库 (必须安装)3. 打包文件配置。
react-native-svg-transformer：以与在Web应用程序中相同的方式在React Native项目中导入SVG文件
02-05
当使用诸如类的库将导入的SVG图像转换为React组件时，React Native SVG转换器允许您以与在Web应用程序中相同的方式在React Native项目中导入SVG文件。 这样就可以对React Native和Web使用相同的代码。 用法 将.svg...
react-native-svg-parser:解析SVG文件并将其转换为'react-native-svg'格式的对象。 笔记
04-26
react-native-svg-parser This project is a proof of concept only. It is not actively maintained. 转换为react-native-svg格式的SVG / XML解析器。 创建该项目是为了使其易于与项目一起使用现有的SVG文件，该...
article-react-native-art-svg:如何使用react-native渲染svg文件？
05-18
如何使用React Native ART渲染SVG文件？ 我们不会使用任何svg库，而是将利用库。 界面看起来像这样。 import { ART } from 'react-native' ; const { Surface , Shape , Group , Text , Path , ...
react-native-svg-charts：:chart_increasing:一个库可以为React Native统治所有图表
02-05
react-native-svg-charts 欢迎使用react-native-svg-charts！ react-native-svg-charts为iOS和Android上的React Native提供SVG图表支持，以及Web的兼容性层。 寻找维护者！ 我一个人没有时间维护这个库了。 最好是...
react-native-svg：用于React Native，React Native Web和普通React Web项目的SVG库
02-26
react-native-svg react-native-svg为iOS和Android上的React Native提供SVG支持，以及Web的兼容性层。 特征 支持大多数SVG元素和属性（Rect，Circle，Line，Polyline，Polygon，G ...）。 易于为react-native-svg。 安装 自动地 与expo-cli :check_mark_button: 附带了本机代码！ 使用以下命令安装JavaScript： expo install react-native-svg :books: 有关更多信息，请参见。或跳至“ 。 与react-native-cli 从npm安装库 yarn add react-native-svg 链接本机代码 带有自动链接（React本机0.60+） cd ios && pod install 前0.60 react-native link react
React Native Icon方案：react-native-svg
weixin_34356138的博客
09-01 531
原文地址：github.com/HuJiaoHJ/bl… 网上 React Native 的 icon 实现大都是使用iconfont方案，即：react-native-vector-icons 此方案存在一个问题：强依赖客户端打包，即每新增图标，就需要客户端重新打包，资源管理上不能做到 RN 与客户端解耦 为了避免这个问题，使用了SVG方案：react-native-svg 来实现Icon 接下...
reactnativesvg一个ReactNative的SVG库
08-08
react-native-svg 一个React Native的SVG库
推荐开源项目：React Native SVG - 为React Native添加SVG支持
gitblog_00047的博客
03-20 719
推荐开源项目：React Native SVG - 为React Native添加SVG支持 react-native-svg项目地址:https://gitcode.com/gh_mirrors/rea/react-native-svg 项目简介 在Web开发中，SVG（Scalable Vector Graphics）因其可缩放性和丰富的图形能力而被广泛使用。而在移动应用开发领域，React...
react-native中使用svg图标
zdluoa的博客
04-15 5260
在web开发中我喜欢svg图标：    1、矢量图标，不会因屏幕大小失真；    2、文件大小，svg图标比png图标小；    3、灵活性，可以修改图标颜色，实现图标复用；    所以在进行react-native开发的时候，在图标选择上，选择使用svg图标，在使用react-native时,通过Image require svg图片时，不会显示，搜索资料才知道，react-native不支持r...
react-native使用SVG图片
diaojw090的博客
04-08 3883
react-native本身是不支持Image中require SVG图片的，需要借助插件react-native-svg 与 react-native-svg-uri来完成 步骤： 1.下载相关依赖包 npm install react-native-svg --save npm install react-native-svg-uri --save 2.与react-native连接 re...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值