react-native与svg整合 ----- react-native-svg

React-Native 与Iconfont整合

1、从阿里妈妈上选择自己所需要的素材，下载源代码

http://www.iconfont.cn/

下载后得到的iconfont.ttf iconfont.svg.js即为所需文件

两种解决方案： react-native-vector-icons && react-native-svg

采用 react-native-svg解决方案：

（1）下载依赖包 react-native-svg

yarn add react-native-svg

执行link操作

react-native link react-native-svg

（2）在android/settings.gradle文件追加如下几行：

include ':react-native-svg'

project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')

（3）在android/app/build.gradle中插入依赖模块

compile project(':react-native-svg')

（4）在 android/app/src/main/java/[...]/MainApplication.java中插入如下操作

添加 import com.horcrux.svg.SvgPackage;

在getPackages()方法的返回值中添加 new SvgPackage()

注意> 编译react-native-svg出现的问题

error: resource android:style/TextAppearance.Material.Widget.Button.Borderless.Colored not found.

error: resource android:style/TextAppearance.Material.Widget.Button.Colored not found.

error: failed linking references.

是因为svg编译打包使用的是高版本的原因，需要修改自己项目app:build.gradle做对应的升级处理

下载图标方式

（1）从阿里妈妈上下载自己需要的各种图标，iconfont.svg即为所需

（2）自己编写脚本，生成指定格式的图标文件iconfont.svg.js

(脚本暂时没有进行开发，基本确定采用python/shell/perl脚本进行开发)

（3）自己手动的添加图标的填充颜色（颜色是统一定制化开发的，在其中填充fill）

（4）自己封装IconSvg组件

import React, { Component } from 'react'

import Svg, { Path } from 'react-native-svg'

import Icons from '[...]/iconfont.svg.js'

const ICON_SIZE = { xxs: 15, xs: 18, sm: 21, md: 22, lg: 36 }

export default SvgIcon extends Component {

render() {

const { type, fill, width, height, size, style } = this.props

return (

<Svg

width={width || ICON_SIZE[size] || 22}

height={height || ICON_SIZE[size] || 22}

viewBox={Icons.viewBox[type] || '0 0 1024 1024'}

style={{

...style,

}}

>

{

Icons[type] && Icons[type].map((path, index) => {

let default_fill = path.fill

default_fill = fill ? fill : default_fill

return <Path key={index} d={path.d} fill={default_fill} />

})

}

</Svg>

)

}

}

（5）使用

<SvgIcon type='ac_unit' size='40' width='22' height='22' fill='#ccc' />