Iconfont 在 React-native中的使用

相信很多人都已经用过了类似react-native-vector-icons这样的组件吧！但是在很多时候，我们会遇到诸如“怎么我需要的图标这个库里面找不到呀”，“我们自己的ui设计了一套图标怎么用起来呀”之类的问题。没错没错，这个时候我们就需要提到iconfont了！
iconfont，顾名思义，就是图标字体。它是将矢量图标做成字体，大大的减小了琐碎文件的个数，也方便了前端人员使用，而为大家所熟知的无疑就是阿里的iconfont网站啦[iconfont.cn], 在这个网站上存在着很多设计师们设计出来的好看的小图标，我们只需要将他们一个个的添加到购物车里再点击下载代码就可以得到ttf文件了！
到底如何使用这个ttf文件呢？接下来就进入到干货环节。首先打开解压出来的文件夹之中的demo_unicode.html，在这里可以看到很多的图标预览以及图标所对应的Unicode值。比如说是的，这个&#x意思就是宽字符，而e697则是宽字符的内容啦。在react-native中怎么使用呢？其实就是利用Text组件，设置fontFamily为设置过的字体之后，将内容设置为’\ue697’就可以展示图标了！color是颜色，fontSize是大小，是不是非常简单~
为了方便使用，我们可以将宽字符串做成一个map，key-value映射，这样就能非常方便的将其封装称组件并使用了，而不是每一次要使用的时候都要去查一遍对应的宽字符到底是什么。

let fontMap = {
  '697': '\ue697' // 
}
20,
  color:'#888',
  fontFamily:'Iconfont',
}}>{fontMap[this.props.name]</Text>

那么接下来笔者就来讲一讲ios和android环境下怎么让ttf生效吧！
首先是在src中新建一个asset/fonts文件夹，将从iconfont中下载过来的ttf放在里面。之后打开xcode，打开info.plist,然后我们在Information property list下新建Fonts provided by application属性，并配置Iconfont.ttf(这个名字会和fontFamily有关，如果配置过vector-icon的话Fonts provided by application是已经存在的，就不需要新建 ).随后在xcode左侧目录下右键选择Add Files to Prj,添加ttf至项目目录下，最后打开项目配置的Build Phases，检查Copy bundle Resources中是否包含了我们的ttf文件，没有的话在下面有一个+-号，我们点击添加，之后保存一下即可使用啦！
在Android环境下就比较的简单，对于自定义的图标库，也只需要在android/app/build.gradle中添加:

project.ext.vectoricons = [
    iconFontNames: ['Iconfont.ttf' ] //添加你需要赋值的字符文件
]

然后把ttf文件copy到[project root]/android/app/src/main/assets/fonts/之下就好啦

Tips: 如果修改了ttf文件，需要重新react-native run-[plantform]才行。