ReactNative中如何使用自定义的Iconfont图标

最近在研究react native的字体。想把阿里的字体库放到RN里使用，网上找了很多文章都觉得不合适。所以自己经过多次实践总结了一个亲测可用的方法：

我最开始百度出来的文章，不少都推荐借用 react-native-vector-icons，但是我觉得这一步还是增加了不少无用代码。
其实使用 iconfont，本质上就是使用一种“图标形状的字体”，所以没必要使用react-native-vector-icons。

一、从阿里图标库下载自己项目的图标库

这个不用细说，用过阿里图标库的人都知道怎么下载。实在不知道请自行百度。

二、添加字体文件

在根目录下创建文件夹并把字体库文件iconfont.ttf 复制到建好的文件夹下。如图：

三、修改package.json文件

注：如果项目刚刚初始化还没有启动过，请先启动一次项目。然后再往下继续
把下面的代码复制到package.json文件里。这是一个把配置都交给 react-native 的一个简单方法。
在

"rnpm": {
    "assets": [
    "./assets/fonts/"
    ]
}

然后运行react-native link
你就可以在 plist 文件（iOS）或 android/app/src/main/assets/fonts（安卓）中看到对应配置。如图:


安装后需要重启 react-native。

四、编写代码

打开在 iconfont 下载的图标集会有这个文件

里面可以看到对应图标的 unicode

把你使用的图标放到标签中。例子中用的是第一个图标其中选用e697，然后在前面加上\u组成最后需要的unicode\ue679

<Text style={{
  fontFamily: "iconfont",
  fontSize: 46,
  color: 'red'
}}>{'\ue679'}</Text>

有一点需要注意，写在 fontFamily 的字体名称要使用全名（而不是文件名）