React native 自定义IconFont react-native-vector-icons

iOS

1.通过xcode将‘xxx.ttf’文件引入项目，如图：

在准备好了字库文件后，就可以加到项目中了，是把ttf文件加入到项目中，这里需要注意的是要把这些ttf加入到bundle中，也就是说，最后的ipa文件中必须包含有这些ttf(否则应用中到哪里去找字库呢？)

  在加入后，我们可以分别在FileExplore和Build Phase里面看到这些内容，如下图所示：

  设置到这里还有最后一步，就是在info.plist文件中加入相应信息，这一步实际上实在项目的Info页里面增加Fonts provided by application项，并设置相应的ttf文件进去，这样就告诉了应用，我要加入新的字体了，对应的字体文件是哪些。

  到这里，字库文件应该是准备好了，下面我们需要确认一下字库的名字，因为代码中需要用名字来指定字体。通常来说，这个名字和文件名是相同的，但也有不同的时候，所以这一步一定不要忽略。

获取字体 ，推荐图标库：

IconFont：http://www.iconfont.cn/home/index
Fontello：http://fontello.com/
IcoMoon：https://icomoon.io/app/#/select

步骤

首先获取svg图标（设计师提供或者从图标库下载）；
通过Fontello或者IcoMoon提供的方式进行svg转ttf；
在react-native项目中使用ttf；

这里说下IcoMoon：

编辑完成后通过 Generate Font 方式下载，解压，font文件夹中的ttf即为图标文件，json文件记录了图标及图标库的信息。

2.在node_modules/react-native-vector-icons下新建Icomoon.js文件，复制一份Icomoon.ttf到node_modules/react-native-vector-icons/Fonts目录下，node_modules/react-native-vector-icons/glyphmaps下新建Icomoon.json文件。如图：

Icomoon.js代码：

import createIconSet from './lib/create-icon-set';import glyphMap from './glyphmaps/Icomoon.json';const iconSet = createIconSet(glyphMap, 'Icomoon', 'Icomoon.ttf');export default iconSet;

Icomoon.json格式如下：

{  "icon_bofang": 6400,  "icon_cai": 6401}

想要获得Icomoon.jsom里面的格式内容 .json文件中的key自定随便，到时候使用的时候就用这个key，他的value从下载的字体文件夹中找到，也是一个json文件，打开后其中每一个对象有一个code键，它对应的value就是我们需要的那个值。但是图标的个数非常多，需要写一段代码，获得我们所需要的Icomoon.json里面的格式。

此时，在需要用到的界面引入Icomoon,使用图标，如下图：