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
提取字符对应表