react native 使用圖標字體(IconFont)

前言

今天在做react-native項目時，需要引入圖形字體進行使用，但在網上找了很多資料，都是一知半解的，沒有說完成，對於像我這樣對小白來說很是難受，在經過n久，終於弄好了，現在進行總結一下，希望能給剛進坑的孩童提供幫助，也希望各位大神指點。

注： 本文只講述了mac環境的ios項目中引入，android環境後續更新

正文

圖標字體（IconFont）

IconFont，中文常被叫做圖標字體或圖形字體，是一種特殊的自定義字體，如果想要了解具體的內容，可以查看 解密IconFont ，裏面做了很詳細的說明。

能夠將svg圖標轉換成字體文件的網站有：
阿里巴巴矢量圖標庫
IcoMoon
…

react-native項目中引入iconfont

1. 下載需要的字體文件，用xcode打開RN項目，然後將後綴爲“.ttf”的字體文件引入RN項目中，具體步驟如下圖：
2. 去Info.plist中添加 Fonts provided by application，然後在其底下添加子項，value值爲字體文件名稱，如有多個，則添加多個子項，一個子項對應一個字體文件
   
3. 前往TARGETS -> Build Phases -> Copy Bundle Resources中如果沒有找到自定義字體文件,則自行添加. （下圖中我的字體文件爲iconfont.ttf ，已經引入）
   

使用IconFont

• 提取字符對應
  1. 手動提取，將字體文件轉換爲xml格式，然後找到類似下面代碼，將其中到code 轉換爲十進制，然後寫入一個對象中
     說明： 對象中的key是使用的時候的名稱，可以自行命名，value值爲轉換的十進制；

     {
     "rectangle390":"58880",
     "shezhi":"58925",
     "wode":"58926",
     "sousuo":"58927",
     "gengduo":"58935",
     "saoyisao":"58936"
     };	
     

  2. 自動提取；當數量多的時候，手動進行效率勢必很低，在這使用python進行提取
     a. 使用的python3 和 fontTools庫，如果沒有，需要安裝一下，安裝python3
     安裝fontTools命令：

     pip3 install fontTools      
     

     b. 在桌面或什麼地方，新建一個文件夾，進入文件夾後新建一個python文件 iconfont-mapper.py，然後將下面代碼複製到文件中保存

     import sys, os
     
     from fontTools.ttLib import TTFont;
     
     tmpl = """
     var map = {%s};
     ;module.exports = (name)=>String.fromCharCode(map[name]);
     """    
     
     def main(fontFile, output):
         print('23233')
         try:
             font = TTFont(fontFile)
     
             font.saveXML('./woff4.xml')
             glyphMap = font["cmap"].getcmap(3,1).cmap
             tmp = ""
             for k in glyphMap:
                 tmp += '"%s":"%s",' % (glyphMap[k],k)
     
     	        f=open(output,"w+")
     	        f.write(tmpl % tmp)
     	        f.close()   
     	    except Exception as ex:
     	        print (ex)
     
     if __name__ == '__main__':
     	if len(sys.argv) < 2:
     		showHelp()
     		sys.exit()
     
     if len(sys.argv) == 2 and sys.argv[1] == "-h":
     	showHelp()
     	sys.exit()
     
     if len(sys.argv) > 2:
     	if os.path.exists(sys.argv[1]):
     		main(sys.argv[1],sys.argv[2])
     	else:
     	print("Font file not found.")
     
     sys.exit()	
     

     c. 將字體文件（iconfont.ttf）在複製到該文件夾下，打開終端，切換到該文件夾，運行以下代碼：
     python3 iconfont-mapper.py iconfont.ttf fontJson.js
     運行完成後就可以看到文件夾中多了一個font-json.js文件，裏面的內容就是我們需要的，文件內容如下：
     
• 在RN項目中使用自定義字體

  1. 回到RN項目，在根目錄下新建一個文件夾 assets，然後將font-json.js和iconfont.ttf文件複製進去，如下圖：
     

  2. 在需要用到自定義字體的地方，引入fontJson.js 文件，如下：

     import React, { Component } from 'react';
     import { Text } from 'react-native';
     import icon from '../../assts/fonts/fontJson'
     
     export default class Icon extends Component {
       render() {
         // let { name,size } = this.props 
         return (
           <Text style={{fontFamily: 'iconfont', fontSize: 30}}>{icon('wode')}</Text>
         )
       }
     }
     

     注：此處有一個坑，就是字體名稱，目前暫未找到字體名稱由那個信息決定以及怎麼修改，所以大家在使用的時候，在生成字體文件階段就要確定好名稱，後續文件名儘量不要更改，否則會出現找不到字體名稱的情況出現，如有哪位大神知道請指教，謝謝！

     最終效果圖如下：
     
     整個流程就是這樣了，大家有什麼需要補充或不明白的，都可以留言交流，謝謝！！！

參考文章：

iOS添加使用自定義字體名字的問題
iOS導入自定義字體
在React Native中優雅的使用iconfont
提取字符對應表