ReactNative 引入SVG图片

一、将所有的SVG内容，打包到js文件中，以key-value的形式存储。

1.使用脚本将所有SVG资源打包，脚本来源：react-native icon解决方案（svg）

生成getSvg.js文件（脚本代码如下），与SVG文件夹放在同一级，并根据需要修改其中参数。如SVG路径：./svgs ，修改成自己的文件夹路径及名称；导出的目标文件：./Svgs.js 可以修改名称。

//  getSvg.js
var fs = require('fs');
var path = require('path');
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));
   });
  });
}

// 生成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);
  });

2.打开Terminal，执行 node getSvg.js 即可。

二、使用react-native-remote-svg 引入SVG

1. 使用react-native-svg 与 react-native-svg-uri 组合，svg导入之后，只显示黑色。具体看：react-native icon解决方案（svg），评论有解决方案。

2.使用react-native-remote-svg，直接require资源，Android不支持，因此需要将SVG内容直接引入代码。

如下，传入svg的名称，获取资源对象给source即可：

_getSVGData (imgName) {
    let svgData = Svgs[imgName];  
    let setSvg = {uri:'data:image/svg+xml;utf8,' + svgData};
    return setSvg;
}

<Image style={{ width: Constants.defaultRightItemSize, height: Constants.defaultRightItemSize }}
            source={this._getSVGData('call')} />

ReactNative 引入SVG图片

猜你喜欢