React-Native开发从入门到实战项目总结react native

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

2017-10-26  本文已影响370人  光强_上海

前言

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

Linking Native Dependencies

自动link(推荐使用此方式添加原生依赖)
手动link(不推荐，对于不懂原生开发的同学稍微有些复杂)
iOS
Android

注意

介于一部分同学对于iOS\android原生工程的一些配置使用不是很熟悉，这里我们就采取最简单的自动link方式：react-native link react-native-vector-icons。如果有同学想学习如何手动添加原生依赖，可以参考官方安装教程

如何使用

当我们 install 和link 完成后，在iOS环境下，我们就可以正常的使用react-native-vector-icons组件提供的字体了。

但是对于安卓环境下，我们运行程序，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

icon icon plist

到此iOS环境下添加自定义字体库环境配置完毕

Android

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

如何使用自定义字体库

<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

福利时间

上一篇 下一篇

猜你喜欢

热点阅读