关于react-native: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

待补充 …