前言
iconFont的使用对于前端开发同学肯定不陌生，移动端开发也有普遍的使用。
既然这多公司都选择使用iconFont，那它比使用image资源有什么优势尼?
- 体积小
- iconFont字体库的体积小，能大大的减少安装包的体积
- 便捷
- 能随意更换字体的大小和颜色而且还不会失真，这一点是图片资源所做不到的
- 省事
- 现在网上开源的字体库越来越来，给设计也带来便利，设计不需要在自己去切图做图了，只需要在网上搜索需要的字体直接拿过来使用即可。
既然好处这么多，那我们在平时开发中也肯定要使用iconFont。今天我们就来简单的讲解在react-native开发中如何使用iconFont以及如何自定义自己的字体库。
预览效果图
想运行demo查看效果请点击
iOS
iOS
Android
Android
如何 install、link
react-native开发中，我们使用最多的字体库是三方的开源字体库组件：
react-native-vector-icons，查看react-native-vector-icons官方地址请点击 。
由于iconFont依赖原生工程，这里接入iconFont也就区分iOS和Android平台。
Installing
npm install react-native-vector-icons --save
Linking Native Dependencies
自动link(推荐使用此方式添加原生依赖)
react-native link react-native-vector-icons
手动link(不推荐，对于不懂原生开发的同学稍微有些复杂)
iOS
- 手动link有两种方式:
- 手动添加配置项
- pod安装
Android
- 手动link有两种方式:
- 依次编辑settings.gradle、build.gradle、MainApplication.java
- Gradle安装
注意
介于一部分同学对于iOS\android原生工程的一些配置使用不是很熟悉，这里我们就采取最简单的自动link方式：react-native link react-native-vector-icons。如果有同学想学习如何手动添加原生依赖，可以参考官方安装教程
如何使用
当我们 install 和link 完成后，在iOS环境下，我们就可以正常的使用react-native-vector-icons组件提供的字体了。
-
import Icon from 'react-native-vector-icons/FontAwesome' -
<Icon name="rocket" size={30} color="#900" />
但是对于安卓环境下，我们运行程序，Android工程可能报如下错误：
error
studio报错：react-native-vector-icons中 Failed to find Bulid Tools revision 26.0.1
这时我们来对比下我们工程中app\build.gradle中的BulidToolsVision和node_modules中的react-native-vector-icons组件中android目录下的build.gradle文件中的BulidToolsVision。我们发现两个BulidToolsVision版本号不一致。
项目工程中的BulidToolsVision
组件库中的BulidToolsVision
这时我们只需要将node_modules中的react-native-vector-icons组件中BulidToolsVision改成和项目工程中一致，在重新build即可。
build成功后的输出日志
success
最后我们在重新运行Android项目即可。
上面所讲的都是react-native-vector-icons原生字体的使用，下面我们就来讲如何自定义字体库。
iconfont
ttf
iOS
- 在Xcode项目工程目录下创建一个fonts文件夹
icon
- 将之前下载到本地的.ttf字体文件拖到我们创建好的fonts文件夹中，这时Xcode会弹出提示，我们按下面的勾选即可。
icon
- 在工程的plist文件中我们点击
+添加字体库，注意：字体库的名字要和下载下来的字体文件名字一致。
plist
到此iOS环境下添加自定义字体库环境配置完毕
Android
- 在项目app/src/main/assets/fonts文件夹中，将我们下载到本地的.ttf字体文件拖到此目录中。
adnroid
到此Android环境下添加自定义字体库环境配置完毕
封装自定义字体库组件，这里我就不一一讲解如何封装字体库组件了，下面直接贴出封装好的组件源码，同学们想运行demo查看效果请点击
- 封装的组件源码如下：
/**
* Created by guangqiang on 2017/9/14.
*/
import FontAwesome from 'react-native-vector-icons/FontAwesome'
import {OIcon} from './oneIconFont'
import React, {Component} from 'react'
import PropTypes from 'prop-types'
const iconMap = {
fontAwesome: FontAwesome,
oneIcon: OIcon
}
class Icon extends Component {
render() {
const {name, size, color} = this.props
if (!name.includes('|')) {
throw new Error('name 解析错误！')
return null
}
let nameArr = name.split('|')
let fontlib = nameArr[0]
let font = nameArr[1]
let CustomIcon = iconMap[fontlib]
if (!CustomIcon) throw new Error('没有找到匹配的font库，请review代码！')
return (
<CustomIcon name={font} size={size} color={color}/>
)
}
}
Icon.propTypes = {
name: PropTypes.string.isRequired,
size: PropTypes.number.isRequired,
color: PropTypes.string.isRequired
}
export {Icon}
- 字体库映射表如下：
/**
* Created by guangqiang on 2017/9/14.
*/
import {createIconSet} from 'react-native-vector-icons'
const glyphMap = {
tb_Picture_o: 59032,
tb_article_o: 59576,
tb_Movie_o: 58904,
tb_Music_o: 58881,
toastError_s: 58954,
toastSuccess_s: 58894,
toastWarning_s: 58882,
bookMark_o: 59044,
music_paused_o: 58880,
music_playing_s: 58889,
drop_menu_s: 59693,
like_o: 58910,
horn_playing_o: 58920,
horn_paused_o: 58918,
nav_back_o: 58914,
share_o: 58888,
more_v_o: 58963,
comment_o: 58923,
love_s: 58902,
love_o: 58905,
downLoad_o: 58906,
menu_h_o: 58987,
music_pre_o: 58883,
music_next_o: 58890,
scale_o: 58903,
reply_o: 58884,
back_s_o: 58885,
music_single_cycle_o: 58891,
music_cycle_o: 58924,
music_random_o: 58886,
new_tag_o: 58974,
video_o: 58980,
star_o: 58892,
play_cycle_o: 58907,
comment_dot_o: 58887,
tv_o: 58913,
shrink_o: 58896,
unlocked_o: 58898,
locked_o: 58921,
download_o: 58901,
share_dot_o: 58915,
ex_mark_o: 58897
}
const OIcon = createIconSet(glyphMap, 'iconfont', 'iconfont.ttf')
export {OIcon}
如果运行程序报错：
err
解决方案：
// react 15.5.0版本之后，废除PropTypes属性，需要单独引入prop-types这个包。
import React, {Component, PropTypes} from 'react'
// 将引入PropTypes属性从react替换到prop-types包
import PropTypes from 'prop-types'
注意点
tip
- toastError_s: 这个是自定义的icon的名字
- 58954: 这个是字体的十六进制转为的十进制后的值
- iconfont和iconfont.ttf这个要和导入程序中的字体库文件名保持一致。
如何使用自定义字体库
import {Icon} from './icon'
<Icon name={'oneIcon|toastError_s'} size={20} color={'#dad'}/>
<Icon name={'oneIcon|nav_back_o'} size={20} color={'black'}/>
总结
建议同学们下载作者的demo工程iconfontDemo和查看官方文档相结合学习。iconFont使用牵扯的内容太多，对于非原生开发，没有使用过iconFont的同学们可能感觉很绕，工程需要配置的东西太多，不知道如何配置。如果同学们在接入过程中还是遇到了问题，可以给我留言或者加群
620792950沟通。喜欢的同学们请点赞关注star
福利时间
- 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
- 作者简书主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
- 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
- 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！
网友评论