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');//这个位置 "./svgs"要替换成SVG（即你的放svg文件夹的名字）

// 读取单个文件
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 即可。

借鉴与  https://blog.csdn.net/crazy_sunshine/article/details/80906624