React-native 中Svg字体图标的使用

1.需要引入的库：

yarn add react-native-svg
react-native link react-native-svg
yarn add react-native-svg-uri

2.将所需要的svg图片存入assets->SVG文件夹下，同级别建立脚本文件getSvg.js

SVG文件夹

脚本文件getSvg.js内容：

//  getSvg.js
var fs = require('fs');
var path = require('path');
const svgDir = path.resolve(__dirname, './SVG');

// 读取单个文件
function readfile(filename) {
return new Promise((resolve, reject) => {
  fs.readFile(path.join(svgDir, filename), 'utf8', function(err, data) {
    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));
svgFile = svgFile.replace(/\\n/g,'');
svgFile = svgFile.replace(/>[ ]+</g,"><");
fs.writeFile(path.resolve(__dirname, './Svg.js'), svgFile, function(err) {
  if(err) throw new Error(err);
})
}).catch(err => {
  throw new Error(err);

});

打开新的终端，进入项目的assets文件下，执行node getSvg.js,生成Svg.js文件。
Svg.js文件结构如下：

// svgs.js
export default {
  'svgName1': 'xmlData1...',
  'svgName2': 'xmlData2...',
  ...
}

3.同级别建立Svgs.js，封装Svg Component

// Svgs.js
import React, { Component } from 'react';

import SvgUri from 'react-native-svg-uri';
import svgs from './Svg';

export default class Svgs extends Component<SvgProperties,void>{
  render() {
    const {
      icon,
      color,
      size,
      style
    } = this.props;
    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}
      />
    )
  }
}

同级别，建立SingleSvg.js文件（用来实现一个svg图片中出现多种颜色效果)

//SingleSvg.js
import React,{Component} from 'react';
import {Dimensions} from 'react-native';
import Svg,{Path,Circle,Text}from 'react-native-svg';
const { width, height } = Dimensions.get('window');
export default class SingleSvg extends Component{
render(){
    return(
        <Svg height={height * 0.5} width={width * 0.5} viewBox="0 0 80 80">
          <Path
            fill={this.props.pathColor} 
            class="cls-1" 
            d="M8.41,19.22H3.89a2.64,2.64,0,0,1-2.82-2.77V4.53a2.79,2.79,0,0,1,2.79-3H20.15a2.82,2.82,0,0,1,2,.89,2.72,2.72,0,0,1,.75,2V16.41a2.67,2.67,0,0,1-2.78,2.81H15.64L13,21.83a1.39,1.39,0,0,1-.95.4,1.34,1.34,0,0,1-.94-.39ZM3.86,2.66A1.68,1.68,0,0,0,2.17,4.49v12a1.56,1.56,0,0,0,.45,1.2,1.58,1.58,0,0,0,1.24.45h5l.16.16,2.86,2.78a.23.23,0,0,0,.17.07.25.25,0,0,0,.18-.08l3-2.93h5a1.56,1.56,0,0,0,1.19-.45,1.6,1.6,0,0,0,.45-1.23v-12a1.7,1.7,0,0,0-.45-1.27,1.68,1.68,0,0,0-1.23-.53Z"
          />
           <Circle
            fill={this.props.circleColor}  
            class="cls-2"
             cx="19.5" 
             cy="4.5" 
             r="4.5"
          >
          </Circle>   
        </Svg>
    )
}
}

若要实现特殊样式，如圈中包含数字的效果，则只需要在<Svg>的<Circle>的同级别下面添加Test

<Svg height={height * 0.5} width={width * 0.5} viewBox="0 0 80 80">
          <Path
            fill={this.props.pathColor} 
            class="cls-1" 
            d="M8.41,19.22H3.89a2.64,2.64,0,0,1-2.82-2.77V4.53a2.79,2.79,0,0,1,2.79-3H20.15a2.82,2.82,0,0,1,2,.89,2.72,2.72,0,0,1,.75,2V16.41a2.67,2.67,0,0,1-2.78,2.81H15.64L13,21.83a1.39,1.39,0,0,1-.95.4,1.34,1.34,0,0,1-.94-.39ZM3.86,2.66A1.68,1.68,0,0,0,2.17,4.49v12a1.56,1.56,0,0,0,.45,1.2,1.58,1.58,0,0,0,1.24.45h5l.16.16,2.86,2.78a.23.23,0,0,0,.17.07.25.25,0,0,0,.18-.08l3-2.93h5a1.56,1.56,0,0,0,1.19-.45,1.6,1.6,0,0,0,.45-1.23v-12a1.7,1.7,0,0,0-.45-1.27,1.68,1.68,0,0,0-1.23-.53Z"
          />
           <Circle
            fill={this.props.circleColor}  
            class="cls-2"
             cx="19.5" 
             cy="4.5" 
             r="4.5"
          >
          </Circle>   
          <Text fill='#fff' x='16.5' y='6.0' fontSize='5'>12</Text>  
        </Svg>

4.运行时，引入Svgs.js和SingleSvg.js

//app.js
import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import Svgs from './assets/Svgs';
import SingleSvg from './assets/SingleSvg';


type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Svgs icon='icon-access' size='30' color='green'></Svgs>
        <Svgs icon='icons-pay' size='40' color='red'></Svgs>
        <Svgs icon='icons-reset' size='50' color='blue'></Svgs>
        <Svgs icon='icons-me-help' size='50' color='orange'></Svgs>
        <Svgs icon='icons-bang' size='40' color='blue'></Svgs>
        <Svgs icon='icons-tab-store-outline' size='50' color='red'></Svgs>
        <Svgs icon='icons-back' size='50'></Svgs>
    <Svgs icon='icons-weixin' size='50' ></Svgs>
        <Svgs icon='icons-time' size='50' color='red'></Svgs> 
        <Svgs icon='icons-selected' size='50' color='yellow'></Svgs>
        <Svgs icon='icons-write' size='50' color='yellow'></Svgs>
        <Svgs icon='icons-up' size='50' color='yellow'></Svgs>
        <Svgs icon='icons-share' size='50' color='red'></Svgs>
        <SingleSvg pathColor='#000000' circleColor='red'></SingleSvg>
       
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    paddingTop:300,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

5.运行结果
无数字

效果1

有数字

效果2

注：原svg图片文件中必须含有fill属性，否则默认黑色，且无法修改颜色。
具体参照简书react-native icon解决方案（svg）

ps：github中项目demo

新增加svg后，node执行完之后需要重新跑一遍。