RN项目中使用react-native-elements报错: Unrecognized font family 'Material Icons'
查询了一些方案,但各自的环境不尽相同,最后在google中找到了答案.主要问题在于
(1)版本问题
(2)Xcode配置问题
报错如下

解决步骤:
1 . 首先需要正确安装
npm i -S react-native-elements
npm i -S react-native-vector-icons@4
这里需要注意三点:
1 )react-native-vector-icons虽然被react-native-elements所依赖,但它并不会自动安装,需要手动安装
2 )截止目前,elements所依赖的vector-icons的版本必须是4.x, 之前安装了vector-icons@6.x导致报以上错误,很久才发现
3 ) 必须执行react-native link react-native-vector-icons 将该原生库添加到项目, 这是react-native官方的方法。因为vector-icons是原生库
执行该命令后如下

并且在Xcode的Resources内添加了字体(Fonts里的字体)

2 . 修改Xcode的项目配置
1 ) 使用Xcode打开项目, 在根目录下右击选择 "Add file to <项目名称>", 找到node_modules/react-native-vector-icons/Fonts
2 ) 在xcode的Info.plist文件中,加入: Fonts provided by application数组
图示入下



最后,再次运行项目react-native run-ios, 此时可以使用react-native-elements中的字体图标了, 大功告成!
RN项目中使用react-native-elements报错: Unrecognized font family 'Material Icons'的更多相关文章
- iOS原生项目中集成React Native
1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...
- 【已解决】React项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function
react项目中ant-design按需加载,使用react-app-rewired的时候报错 运行npm start或者yarn start报如下错误: TypeError: injectBabel ...
- react项目中引入百度地图打包报错问题
一.我正常引入百度地图,调试时候是好使的,但是打包时候就报错 引入方法如下: 报错如图 正常调试是好使的,但是打包报这个错,解析不了这个BMap,那么怎么办呢? 然后我就转用了window办法,虽然因 ...
- react native 环境报错
按照react native中文网的文档安装 1.brew 管理软件 2.node 在终端启动工程后就报下面这个错误 这个错误是在RN在第一次配置环境启动一个工程的时候 ,在这过程中下载的缓存文件不完 ...
- React Native 日常报错
在学习React.js 或 React Native 过程中,有时看着别人的框架或代码,但总是会出现错误,因为React或之中用到的一些包经常更新,有些代码或教程就显得过旧了. 一.日常报错 'con ...
- 解决Vite-React项目中js使用jsx语法报错的问题
背景 在做存量项目接入Vite测试时发现,存量(老)项目中很多是直接在js中书写jsx语法,使用Vite启动时就会抛出一堆问题Failed to parse source. 不嫌麻烦可以跑个脚本批量修 ...
- 关于Eclipse项目中加入jquery.js文件报错(missing semicolon)问题
在使用Eclipse3.7及以后的版本的时候,加入jQuery文件会报错(missing semicolon),文件中会显示红色小X,虽然这个错误并不会影响项目的运行,但是这个却会大大的影响到开发人员 ...
- maven项目中各文件都没有报错,但是项目名称有红叉
项目报错可以看到Problems(可以在Window--Show View--other--输入Problems找到) 一.可能原因 1.项目中各文件没有报错,但是项目名称中 ...
- React Native 基础报错及解决方案记录
刚开始上手RN,碰到很多坑,记录一下.碰到问题多去看看github上面的issue! 启动命令react-native run-ios报错 1.:xcrun: error: unable to fin ...
- react native运行报错
更换RN项目目录位置后,react-native run-ios,出错. node_modules/react-native/ReactCommon/yoga/yoga/YGNodeList.c 解决 ...
随机推荐
- winform 科学计数法转为小数
先强制转换为decimal. 例如: double xyTolerance = 0.000000008983001; txtXYTolerance.Text = ((decimal)xyToleran ...
- go install and go captcha
https://blog.csdn.net/liuhongwei123888/article/details/8512815 [gocaptcha] http://www.cnblogs.co ...
- Page14:状态观测器[Linear System Theory]
内容包含状态观测器设计分类及其特点 状态观测器设计与状态反馈之间的关系问题 带补偿器动态输出反馈与带状态观测器的状态反馈等价原理 由于第二部分频域部分较为简单,因此仅整理时间域部分
- DATAPUMP进程查询
SELECT * FROM DBA_DATAPUMP_SESSIONS; SELECT * FROM DBA_DATAPUMP_JOBS; 例如: SYS@orclasm > SELECT * ...
- word2vec参数理解
之前写了对word2vec的一些简单理解,实践过程中需要对其参数有较深的了解: class gensim.models.word2vec.Word2Vec(sentences=None,size=10 ...
- 去除html
/// <summary> /// 将HTML去除 /// </summary> /// <param name="Htmlstring">&l ...
- oracle中实现当前月减少或增加N个月
add_months(last_day(trunc(sysdate)),N)N可以为正,表示增加:N可以为负,表示减少.
- 【JMeter】JMeter如何输出测试报告
环境要求 1:jmeter3.0版本之后开始支持动态生成测试报表 2:jdk版本1.7以上 3:需要jmx脚本文件 基本操作 1:在你的脚本文件路径下,执行cmd命令:jmeter -n -t tes ...
- npm 安装包报错 rollbackFailedOptional
npm config rm proxynpm config rm https-proxy 然后使用npm install -g cnpm --registry=https://registry.npm ...
- what's the 场外交易
出自 MBA智库百科(https://wiki.mbalib.com/) 什么是场外交易 场外交易是指证券投资机构之间不通过股票交易所,而以电话.电传等方式相互进行的股票交易. ...