1、 安装

使用npm安装react-native-vector-icons

npm install  react-native-vector-icons  --save

2、cocoapods安装

进入iOS目录执行 pod install 安装 RNVectorIcons

PS: 如果iOS项目编译爆红提示Multiple commands produce xxx.ttf之类的说明字体文件重复引用了,需要在target > Build phase > Copy Bundle Resource中删除重复引用的文件。xcode重复引用编译爆红处理参考。

3、文件检查

node_modules文件夹下找到react-native-vector-icons文件夹,该文件夹下的Fonts文件夹中就是自带的默认的tff字体文件。
在这里插入图片描述

glyphmaps文件夹中的.json文件中可以查看每个图标对应的名字,
在这里插入图片描述
或者用icons图标对照库查找图标名字所对应的图标。

用xcode打开iOS项目,在target->info中查看字体文件是否被添加到Fonts provided by application的数组中,如果没添加的话图标会显示失败。
在这里插入图片描述

4、简单用法

首先引入

import Icon from'react-native-vector-icons/Ionicons';

这个Ionicons对应的是Ionicons.json中的图标。

<Icon name={'ios-aperture'} size={25} color={'red'} />

效果如图
在这里插入图片描述

参考链接1
参考链接2
默认图标查找库

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐