前言
iconFont的使用對于前端開發同學肯定不陌生，移動端開發也有普遍的使用。
既然這多公司都選擇使用iconFont，那它比使用image資源有什么優勢尼?
- 體積小
- iconFont字體庫的體積小，能大大的減少安裝包的體積
- 便捷
- 能隨意更換字體的大小和顏色而且還不會失真，這一點是圖片資源所做不到的
- 省事
- 現在網上開源的字體庫越來越來，給設計也帶來便利，設計不需要在自己去切圖做圖了，只需要在網上搜索需要的字體直接拿過來使用即可。
既然好處這么多，那我們在平時開發中也肯定要使用iconFont。今天我們就來簡單的講解在react-native開發中如何使用iconFont以及如何自定義自己的字體庫。
預覽效果圖
想運行demo查看效果請點擊
iOS
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工程可能報如下錯誤：
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版本號不一致。
這時我們只需要將node_modules中的react-native-vector-icons組件中BulidToolsVision改成和項目工程中一致，在重新build即可。
build成功后的輸出日志
最后我們在重新運行Android項目即可。
上面所講的都是react-native-vector-icons原生字體的使用，下面我們就來講如何自定義字體庫。
iOS
- 在Xcode項目工程目錄下創建一個fonts文件夾
- 將之前下載到本地的.ttf字體文件拖到我們創建好的fonts文件夾中，這時Xcode會彈出提示，我們按下面的勾選即可。
- 在工程的plist文件中我們點擊
+添加字體庫，注意：字體庫的名字要和下載下來的字體文件名字一致。
到此iOS環境下添加自定義字體庫環境配置完畢
Android
- 在項目app/src/main/assets/fonts文件夾中，將我們下載到本地的.ttf字體文件拖到此目錄中。
到此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}
如果運行程序報錯：
解決方案：
// react 15.5.0版本之后，廢除PropTypes屬性，需要單獨引入prop-types這個包。
import React, {Component, PropTypes} from 'react'
// 將引入PropTypes屬性從react替換到prop-types包
import PropTypes from 'prop-types'
注意點
- 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.lxweimin.com/u/023338566ca5 (歡迎小伙伴們：多多關注，多多點贊)
- 作者React Native QQ技術交流群：620792950 歡迎小伙伴進群交流學習
- 友情提示：在開發中有遇到RN相關的技術問題，歡迎小伙伴加入交流群（620792950），在群里提問、互相交流學習。交流群也定期更新最新的RN學習資料給大家，謝謝支持！
