react-native 使用react-native-vector-icons碰到的大坑

最新推荐文章于 2024-01-22 15:02:04 发布
最新推荐文章于 2024-01-22 15:02:04 发布
阅读量1.1k 收藏
点赞数
文章标签： RN react-native 报错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haoeyoyo/article/details/90642039
版权

根据官方文档和网友分享，基本集成步骤大家都清楚，不清楚可以去看文档，我碰到的坑怪我自己粗心大意了，继承号以后使用过程中引入字体库的时候，文件夹路径不是从node文件夹开始的，是直接从库文件夹开始的。

正确写法：import ICON from 'react-native-vector-icons/FontAwesome'
错误写法import ICON from 'node_modules/react-native-vector-icons/FontAwesome'

因为我写路径的时候一直有提示，就没在意是这的问题，各种花式报错，花了我俩小时找不到原因。因为刚开始用RN没多久，所以自己太弱鸡。。。。。

haoeyoyo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
「已解决」react-native-vector-icons无法识别，icon始终为X
学渣蓝鲸的博客
08-15 4729
在RN开发过程中使用react-native-vector-icons，按照流程，怎么都加载不出来，始终显示为下图 加载失败显示的图标 解决： 在执行完一系列操作后，重新运行react-native run-android命令。 完整步骤： 根目录下使用： npm install --save react-native-vector-icons // 下载库 react-...
react-native 矢量库 react-native-vector-icons的报错解决
默默默默燃的博客
02-06 1758
1. 解决方法：将项目目录下 node_modules/react-native/local-cli/core/__fixtures__/files/package.json删除 2. 出现这个错误 解决方案：删除重新安装react-native-vector-icons 安装完成后执行 react-native link 继续修改问题1的错误 3.出现下面这个错误
react-native-vector-icons的简单使用
05-07
react-native-vector-icons的简单使用, index.ios.js文件 等主要代码
react-native-vector-icons报错问题
wayne214的博客
10-30 525
最近在写项目的时候，在调试代码的过程中，偶尔会报如下错误，想必好多同学都遇到了，现在记录一下，和大家分享。 error: bundling failed: Error: While resolving module `react-native-vector-icons/dist/EvilIcons`, the Haste package `react-native-vector-icons` wa...
ReactNative开发中使用react-native-vector-icons
水痕
12-14 1709
1、安装图标库 npm install react-native-vector-icons --save 2、运行命令 react-native link 3、查找自己的图标传送门 4、使用 import Icon from 'react-native-vector-icons/FontAwesome'; <Button transparent> <Icon name='gitlab' size=
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 重命名项目后，您应该清理，构建并重新安装第三方依赖项，以使新...
react-native-matomo:React Native Matomo集成
05-06
用于React Native的Matomo SDK 本文档介绍了如何开始使用Matomo Tracking SDK for React Native。 是领先的开源Web分析平台，可为您提供有关网站访问者，营销... 将node_modules/react-native-matomo/ios/BNFMatomo.xc
react-native-udp：react-native的节点的dgram
02-05
yarn add react-native-udp 或npm： npm install --save react-native-udp 使用React Native> = 0.60 不再需要手动链接软件包。 iOS平台： $ cd ios && pod install && cd .. ＃iOS上的CocoaPods需要这个额外的...
react-native-dynamic-vector-icons：react-native-vector-icons包装器以使用动态类型
02-03
"react-native-dynamic-vector-icons" : "WrathChaos/react-native-dynamic-vector-icons#expo" 对等依赖 重要！ 您需要安装它们。 "react": ">= 16.x", "react-native": ">= 0.55.x", "react-native-vector-icons...
react-native-image-to-pdf:react-native插件可将图像转换为PDF
05-26
入门$ npm install react-native-image-to-pdf --save 或者$ yarn add react-native-image-to-pdf 大多是自动安装$ react-native link react-native-image-to-pdf 手动安装的iOS 在XCode的项目导航器中，右键单击“ ...
react-native之TabNavigator引入react-native-vector-icons
yuanqi3131的博客
12-13 288
一、前言 react-navigation的版本号为6.6.0 二、效果 三、安装 网上很多TabNavigator的例子太老了，先看下方代码 import React from 'react' import { createAppContainer } from 'react-navigation'; import { createBottomTabNavigator } from 'reac...
ReactNative 使用矢量图标 react-native-vector-icons
luolin2611的博客
07-11 4486
一、概述    矢量图标的好处是：可以自定义图标大小，颜色，这样解决了指定死图标的灵活性。但是跨平台应用开发中，ReactNative不像Ionic那样自带矢量图标，针对这问题，引出RN插件 react-native-vector-icons。    GitHub地址：https://github.com/oblador/react-native-vector-icons    废话不多说开始配置...
React-Native项目矢量图标库（react-native-vector-icons）
最新发布
mapbar_front的博客
01-22 1541
在一个前端的工程项目中，一个必不可少的功能就是图标库的使用。相比于图片，矢量图标库，有容积小，不失真，减少资源加载等优秀特性。
react-native 报错 Text strings must be rendered within a ＜Text＞ component.
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
06-29 3666
前言： react- native的标签很像微信小程序，本篇记录我做项目遇到的问题。 一、报错信息 1.Text strings must be rendered within a <Text> component. 意思：文本字符串必须在<Text>组件中呈现。 import React, { Component } from "react"; import { ActivityIndicator, StyleSheet, Text, View } from "..
React Native react-native-vector-icons 使用小记
大赚万万亿
03-30 1119
原文:https://blog.csdn.net/uuq/article/details/53150841备注:icon.buttonimport Icon from 'react-native-vector-icons/FontAwesome'; const myButton = ( &lt;Icon.Button name="facebook" backgroundColor="#3b59...
ReactNative使用精美图标库react-native-vector-icons(具体使用方法)
嘎啦嘎啦
07-25 1万+
具体集成过程请看下面的文章, 感谢分享 https://blog.csdn.net/f409031mn/article/details/79522129 我自己配置时执行了安装/关联两句命令就可以执行了, 没有其他的错误 npm install --save react-native-vector-icons // 下载库 react-native link react-native-vec...
react-native开发踩坑之 ios上react-native-vector-icons 的error：unRecognized font family 'FontAwesome'
jiangcs520的专栏
04-05 6388
RN开发过程中使用了第三方图标库，由于对iOS也不是特别熟，所以搞了两天才跨过去，解决完毕后分享一下，毕竟RN开发资源还是比较稀缺的，多一点贡献是一点。 解决问题首先第一步那绝对是官网找，react-native-vector-icons github链接地址 iOS配置其实也不太难，里面信息也很好找 接下来解释一下，首先看第一步：把node_modules/react-native-vect
React-native开发之图标库react-native-vector-icons 的集成使用
热门推荐
Angels_安杰的博客
03-08 1万+
RN开发中难免会用到图标，今天我们来集成github上比较受欢迎的一个强大的icons库。 先上效果图 源码已分享之码云：https://git.oschina.net/osczaizai/RNWeiBo 更多分享请看 http://cherylgood.cn 可通过下面链接直接搜索你想要的icons Browse all. Entypo by Daniel Bruce (
react-native 使用字体图标 (react-native-vector-icons)
肖的博客
02-08 348
安装 yarn add --save react-native-vector-icons # 下载库 react-native link react-native-vector-icons # 自动关联 安装关联后项目重启 使用 import Icon from 'react-native-vector-icons/AntDesign'; <Icon name='user' size...
react-native-vector-icons 如何安装
06-02
您可以通过以下步骤安装 react-native-vector-icons： 1. 打开终端并进入您的 React Native 项目目录 2. 运行以下命令安装 react-native-vector-icons： ``` npm install react-native-vector-icons --save ``` 或者 ``` yarn add react-native-vector-icons ``` 3. 对于 iOS，运行以下命令来链接 react-native-vector-icons： ``` react-native link react-native-vector-icons ``` 4. 对于 Android，打开 `android/app/build.gradle` 文件并添加以下内容： ``` apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" ``` 5. 最后，在您的代码中导入所需的图标并使用它们： ``` import Icon from 'react-native-vector-icons/FontAwesome'; const myIcon = <Icon name="rocket" size={30} color="#900" />; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值