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

96
光强_上海
2017.10.26 22:57* 字数 1526

前言

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学习资料给大家,谢谢支持!
react-native