在react-native-vector-icons中使用自定义图标

react-native-vector-icons的安装参考链接

这里主要介绍如何在react-native-vector-icons中使用iconfont官网
上的图标。

1、下载图标素材

首先在iconfont网站上挑选好图标，或者自己的设计将图标上传上去之后，加入购物车，

选好所有的图标后, 在购物车选择下载代码。解压后得到如下文件

这里我们只需要iconfont.tff文件和iconfont.json文件。

2、将图标字体添加到项目中

主要分三步(node_modules -> react-native-vector-icons目录下)：

1. 将下载的TTF文件copy到Fonts文件夹下。
2. 在glyphmaps创建自定义的Json文件。
3. 在react-native-vector-icons目录下创建js文件。

1、首先将下载好的iconfont.ttf文件copy到react-native-vector-icons->Fonts文件夹下并改名为 MyFont.ttf 。

2、在glyphmaps文件夹下创建 MyFont.json 文件，内容如下

{
  "name1": 58958,
  "name2": 58959,
  "name3": 58960
}

PS： 其中的name1、name2、name3为引用时的图标名称可以自定义，value值从iconfont.json中获取。如图：

unicode_decimal 字段对应的值作为json文件中的value值。

3、在react-native-vector-icons文件夹下创建MyFont.js文件，仿照自带的js文件写法输出一个控件如下，

import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/MyFont.json';

//第一个参数为json文件 第二个参数为font_family 第三个为字体文件
const MyFont = createIconSet(glyphMap, 'iconfont', 'MyFont.ttf');

//输出字体图标控件
export default MyFont;

export const Button = MyFont.Button;
export const TabBarItem = MyFont.TabBarItem;
export const TabBarItemIOS = MyFont.TabBarItemIOS;
export const ToolbarAndroid = MyFont.ToolbarAndroid;
export const getImageSource = MyFont.getImageSource;

PS： 这里用到了刚才创建的ttf文件和json文件。输出MyFont控件可以在代码中使用。

3、在Xcode中链接字体文件

打开iOS项目，将MyFont.ttf文件引入到项目中。
在项目文件夹上右键选择add files to XXX ，只需要添加引用就行了，勾选creat folder refrences

在target -> build phases -> copy bundle resources 中点加号将Myfont.ttf 文件加入。
在target->info->Fonts provided by application 中添加字体如下

4、在代码中中使用

import MyFont from 'react-native-vector-icons/MyFont'

<MyFont name={'name1'} size={50} color={'red'} />
<MyFont name={'name2'} size={50} color={'black'} />
<MyFont name={'name3'} size={50} color={'blue'} />