前言

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

待补充...