react-native-vector-icons 安装、使用
程序员文章站
2023-03-26 20:52:53
使用react-native-vector-icons时出现了很多问题,如IOS报错unRecognized font family 'FontAwesome'以及安卓无法正常显示图标 ......
前言
任何库的安装与使用都离不开官文,按照官方文档一步步操作可以规避大多数问题。不过很多库只有英文文档,想要完全参透需要时间。react-native-vector-icons 是最近学习react native时所用到的一个图标库,这个库自带了十多种图标库,也可以将自定义图标稍作处理后在rn中使用。期间遇到了不少问题,尤其是解决ios出现的error花了我不少时间,疯狂百度后发现其实操作很简单。
先上github地址,有能力的可先看看:
使用内置的图标库
- 先安装包 npm i react-native-vector-icons -d
- 项目中引入 import fontawesome from 'react-native-vector-icons/fontawesome'
- 使用 <fontawesome name="home" size={26} />
- 在这里可以查看react-native-vector-icons中自带的图标库以及库中对应图标的name:
使用自定义图标(如阿里妈妈)
- 使用阿里妈妈图标库生成.ttf文件
-
将.ttf文件加入 node_modules/react-native-vector-icons/fonts中
- 随便复制一份 字体名.js 文件 并改成自己要引入的,这个js文件可以就放在react-native-vector-icons包中,也可以从node_modules中拿出来放入项目里
- 然后跟使用内置库一样使用 import xxx from 'react-native-vector-icons/xxx.js' <xxx name="wechat" size={26} />
import createiconset from './lib/create-icon-set'; const glyphmap = { 'wechat': 59001, //中的 e625转成十进制 } const iconset = createiconset(glyphmap, 'iconfont', 'iconfont.ttf'); export default iconset; export const button = iconset.button; export const tabbaritem = iconset.tabbaritem; export const tabbaritemios = iconset.tabbaritemios; export const toolbarandroid = iconset.toolbarandroid; export const getimagesource = iconset.getimagesource;
android 无法正常显示图标
在 android/app/build.gradle 下加入
project.ext.vectoricons = [ iconfontnames: [ 'fontawesome.ttf'] // name of the font files you want to copy ] apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" //或者直接引入全部 apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
ios报错 unrecognized font family 'fontawesome'
-
使用xcode打开项目下的ios文件夹 或者 xxx.xcodeproj 文件(xxx为项目名)
- 打开之后目录中会有一个与项目名称同名的文件夹,右键单击这个文件夹,选择 add files to xxx,加入要使用的.ttf文件或者是 react-native-vector-icons下的整个fonts文件夹,记得勾选上 create floders 中的 create group 和 add to targets 中的 xxx。
- 编辑 与项目名同名的文件夹 下的 info.plist,并加入行 fonts provided by application,在该行中加入 字体文件名
- 注意,每个被add的.ttf文件都要在 fonts provided by application 中加入,当add的是整个fonts文件夹时,文件夹中所有.ttf文件都要在fonts provided by application 中加入,否则会出现 we ran "xcodebuild" command but it exited with error code 65. 这样的错误
- 注意,ios的font-family要求与字体文件字体名相同(不是文件名)比如从阿里妈妈下载的文件 字体名是 iconfont,那么在xxx.js中就要使用iconfont
const iconset = createiconset(glyphmap, 'iconfont', 'myicon.ttf'); //阿里妈妈的图标font-family为iconfont
主要参考资料
-
https://blog.csdn.net/weixin_38713540/article/details/71474462
-
https://blog.csdn.net/jiangcs520/article/details/69366245
-
https://blog.csdn.net/ruffaim/article/details/80049291
推荐阅读
-
IBM X3650 M3服务器安装windows 2003的方法
-
HP Gen8 服务器安装2008 R2 帮助手册
-
电脑开机后键盘不能使用,鼠标却正常使用是怎么回事?如何解决?
-
键盘鼠标怎么如何打开?键盘鼠标使用方法介绍
-
HP DL380 G8使用Intelligent Provisioning引导安装win 2008 x64
-
HP ProLiant服务器使用SmartStart光盘配置阵列卡图文过程
-
鼠标灯不亮且不能正常使用该怎么办?
-
IBM X System ServerGuide 8.41 服务器 系统安装 引导盘图文教程
-
固态硬盘和机械硬盘可以在一起使用吗?
-
iPad Pro与Surface Pro 3那个更适合办公使用?