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和移动端原生开发相关的文章。欢迎在下面留言交流。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。