React Native如何使用IconFont库及自定义font库

前言

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原生字体的使用,下面我们就来讲如何自定义字体库。

  • 下载字体库,这里就以下载阿里巴巴矢量图标库中的字体来讲。没有账号的同学自己注册账号。我们将选择好的字体下载至本地。注意:下载的文件夹中有一个.ttf的文件,后面有用。
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学习资料给大家,谢谢支持!
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容