react-native中使用svg图标

在web开发中我喜欢svg图标：

    1、矢量图标，不会因屏幕大小失真；

    2、文件大小，svg图标比png图标小；

    3、灵活性，可以修改图标颜色，实现图标复用；

    所以在进行react-native开发的时候，在图标选择上，选择使用svg图标，在使用react-native时,通过Image require svg图片时，不会显示，搜索资料才知道，react-native不支持require "svg图片"，也不支持svg

在react-native中使用svg图标需要引入react-native-svg插件：    

npm install react-native-svg --savereact-native link react-native-svg

    引入react-native-svg插件之后，就可以在react-native中编写svg

Image控件不支持svg图标的导入，需要将svg图标转换js文件

import React from "react";

import Svg,{

Path

} from 'react-native-svg';

const Add = props => (

< Svg width= { props. width || 512 } height= { props. height || 512 } viewBox= "0 0 512 512" >

< Path fill= { props. color || '#ccc' } d= "M416 277.67V96h42.666v138.667H416v42.666z" > Path >

Svg >

);

export default Add;

使用svg js组件

import Add from './assets/Add';

< Add width= { 100 } height= { 100 } color= { '#000' } > Add >

效果图