安装react-native-vector-icons并使用默认图标

ReactNative 专栏收录该内容
6 篇文章 0 订阅

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
默认图标查找库

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值