react-native-vector-icons 之填坑记录（2023）

react-native-vector-icons链接在此，插件本身也有安装步骤说明，但感觉有点过时了
因为安卓的配置比较简单，只需要添加一行代码到安卓的android/app/build.gradle中，就可以正常使用起来，所以本文不再讨论，本文重点讨论iOS环境的配置
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

正题

先在项目的终端，用npx react-native info命令，查看当前RN的环境

image.png

RN的版本是小于0.60的，，请按官方的说明一步步配置，应该是没有问题。

RN版本大于0.60版本配置步骤

首先要说明一点，按插件官方的步骤，是不能使用的，要么报错，要么就是图片不能正常显示，显示为一个问号

image.png

正确的步骤如下：

image.png

npm i react-native-vector-icons@8.1.0（一定要指定版本号，否则会安装最新版本10.0.0，但是10.0.0版本是有问题）
cd ios进入iOS工程文件夹
执行pod install，将8.1.0版本安装到iOS项目中
要打开iOS工程去配置一下，如下图
将插件官方的Fonts添加进去
重新编译工程，跑起来yarn ios

<key>UIAppFonts</key>
<array>
  <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>FontAwesome6_Brands.ttf</string>
  <string>FontAwesome6_Regular.ttf</string>
  <string>FontAwesome6_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
  <string>Fontisto.ttf</string>
</array>

plist.gif

最终效果

image.png

结尾

RN 的分享就到这里喽，小伴们,觉得有点用的话，或者已经看到这里面来的请点个赞加关注吧~~ 后续分享更多有关RN Flutter和移动端原生开发相关的文章。欢迎在下面留言交流。