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）
新增加svg后，node执行完之后需要重新跑一遍。
