react native 使用图标字体(IconFont)

前言

今天在做react-native项目时，需要引入图形字体进行使用，但在网上找了很多资料，都是一知半解的，没有说完成，对于像我这样对小白来说很是难受，在经过n久，终于弄好了，现在进行总结一下，希望能给刚进坑的孩童提供帮助，也希望各位大神指点。

注：本文只讲述了mac环境的ios项目中引入，android环境后续更新

正文

图标字体（IconFont）

IconFont，中文常被叫做图标字体或图形字体，是一种特殊的自定义字体，如果想要了解具体的内容，可以查看解密IconFont ，里面做了很详细的说明。

能够将svg图标转换成字体文件的网站有：
阿里巴巴矢量图标库
IcoMoon
…

react-native项目中引入iconfont

下载需要的字体文件，用xcode打开RN项目，然后将后缀为“.ttf”的字体文件引入RN项目中，具体步骤如下图：
去Info.plist中添加 Fonts provided by application，然后在其底下添加子项，value值为字体文件名称，如有多个，则添加多个子项，一个子项对应一个字体文件
前往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, osfrom 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).cmaptmp = ""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
提取字符对应表

react native 使用图标字体(IconFont)相关推荐

HTML字体以及图标字体iconfont、Font Awesome的使用
字体 • 通过font-family可以指定标签中文字使用的字体. • 例如: p{font-family:Arial} 上边这行代码指定了p标签中使用名为arial作为字体 • 一般来说只有用户 ...
修改React Native Android'默认字体颜色为黑色
修改React Native Android'默认字体颜色为黑色找到res/values/styles.xml文件插入代码 <style name="AppTheme" p ...
react native 使用阿里字体图标库
前言本文基于 "react-native": "^0.70.0" 1.下载iconfont图标文件将iconfont图标文件放置在src/assets/fo ...
图标字体iconfont的使用
什么是iconfont? iconfont就是字面上的意思,叫做"字体图标",将一套图标集以字体文件的形式封装,并通过 CSS 的 @font-face 作为 Web Font 调 ...
在react native中使用阿里iconfont图标
1.在阿里图标库中下载好所需的图标到本地.下载解压的目录如下: 打开demo_index.html可以查看下载好的图标,如下: 2.把下载好的字体文件夹里的iconfon.tff复制到src/asse ...
react native关于自定义字体图标android和IOS的处理
2019独角兽企业重金招聘Python工程师标准>>> **``` icon处理:https://icomoon.io/app/#/select 主要是得到各种字体格式和sectio ...
React Native: 添加外部字体
iOS 1. 字体文件加入到Xcode项目中 2. 确认字体文件包含在目标中点击字体文件,查看是否在右栏的 Target Membership中选择了改字体 3. 检查字体是否在打包的资源中在Bu ...
iconfont（图标字体）
iconfont(图标字体) iconfont(图标字体) fontawesome 使用步骤通过伪元素来设置图标字体通过实体来显示图标字体 iconfont 使用步骤 a)使用Unicode引用方 ...
React Native字体问题解决方案指北
源码已上传 Github: react-native-app-font "怎么又是字体,老常的话题现在还拿出来说.关于字体适配的解决方式网上一搜几十篇!".看到标题的烙铁心里一万个 ...