react native项目中使用iconfont

前言

react native项目中常常会用到icon，react-native-vector-icons字体库解决了一部分icon的需求，可是还有一部分设计师给的icon须要在iconfont自行引用，关于使用react-native-vector-icons遇到的坑在以前的文章提到过react native新建项目踩坑记录（字体问题详见问题五），主要是两点：

1. 不要link react-native-vector-icons 库
   使用react-native unlink react-native-vector-icons
2. ios路径下Info.plist文件添加字体映射,详见<key>UIAppFonts</key>的值

ios环境下引用iconfont

1. 下载iconfont，解压后会获得其中一个iconfont.ttf的字体文件。
2. 在rn项目src(react业务代码根目录)下新建assets/fonts目录,复制解压后的t

3. 打开package.json文件，配置字体路径：

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

4. 执行如下命令，执行完成后，重启编辑器(注意文章开头提醒的，若是有安装react-native-vector-icons字体库的，这里你link后运行项目确定报错了，须要重复开头的两个步骤)，link后
5. 若是不执行第四步，你xcode打开你的ios项目，多是没有Resource目录的
6. 若是执行完第四步，重启后会发现该字体文件已经自动拷贝到 android/app/src/main/assets/fonts目录
   
   和配置到Info.plist文件中, 那么你能够直接看最后一步。
7. 若是没有出现第六步所诉的预期，那么，此时你再打开xcode，应该有Resource这个目录了，若是以前原本就有的能够忽略这句话
8. 复制ttf文件到Resource目录下，松开鼠标会弹出来弹窗，选择
9. 去Info.plist中添加 Fonts provided by application，而后在其底下添加子项，value值为字体文件名称，若有多个，则添加多个子项，一个子项对应一个字体文件

10. 添加完去rn项目下ios路径下的Info.plist文件查看字体完整配置：

    <key>UIAppFonts</key>
    <array>
     <string>iconfont.ttf</string>
     <string>AntDesign.ttf</string>
     <string>Entypo.ttf</string>
     <string>EvilIcons.ttf</string>
     <string>Feather.ttf</string>
     <string>FontAwesome.ttf</string>
     <string>FontAwesome5_Brands.ttf</string>
     <string>FontAwesome5_Regular.ttf</string>
     <string>FontAwesome5_Solid.ttf</string>
     <string>Fontisto.ttf</string>
     <string>Foundation.ttf</string>
     <string>Ionicons.ttf</string>
     <string>MaterialCommunityIcons.ttf</string>
     <string>MaterialIcons.ttf</string>
     <string>Octicons.ttf</string>
     <string>SimpleLineIcons.ttf</string>
     <string>Zocial.ttf</string>
    </array>

11. 使用unicode显示字体
    
12. 效果
    

安卓环境下引用iconfont

待补充...