react-native-vector-icons安装过程的坑

最新推荐文章于 2024-05-08 22:55:18 发布
最新推荐文章于 2024-05-08 22:55:18 发布
阅读量659 收藏
点赞数
分类专栏： 一些坑 文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44646986/article/details/104798588
版权
在学习React Native时，尝试安装react-native-vector-icons遇到了问题。官方文档的安装步骤在最新版本中导致错误，主要是自动引包功能的更新。安装过程中，下载并链接后，图标字体文件能自动添加，现在可以顺利使用这些图标组件。
摘要由CSDN通过智能技术生成

概述

由于我最近才学react-native，也刚刚接触了react-native-vector-icons来做图标，所以我就去官网找安装教程

https://github.com/oblador/react-native-vector-icons#android

我做的是Android系统，所以就按照里面的步骤，一步一步配置，但是，结果一堆报错，初步看来，好像是react-native的最新版本所导致的

以下是我写这篇文的时候，我用的最新版本

   "react": "16.9.0",
   "react-native": "0.61.5",
   "react-native-vector-icons": "^6.6.0"

由于react-native-vector-icons的文档未及时更新，所以出了不少错误，react-native的主要更新好像是自动引包，内容如下

https://github.com/react-native-community/cli/blob/master/docs/autolinking.md</

最低0.47元/天 解锁文章
小蓝Lany
关注
专栏目录
react-native引入react-native-vector-icons
九段刀客的博客
08-06 584
1、安装依赖 yarn add react-native-vector-icons 2、Android代码添加配置 android/build.gradle下添加 project.ext.vectoricons = [ iconFontNames: [ 'MaterialCommunityIcons.ttf','MaterialIcons.ttf','AntDesign.ttf' ] // 指定要使用的字体库。 ] apply from: "../../node_modules/react-na
react-native 矢量库 react-native-vector-icons的报错解决
默默默默燃的博客
02-06 1794
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】react-native-vector-icons用法避坑
m0_59183852的博客
11-29 633
在用`React Native`开发`Ap`p时，`icon`的使用必不可少。官网推荐使用`react-native-vector-icons`来完成`icon`的使用。 在学习的过程中碰到了一个问题：一步一步按照官网说明的步骤去使用`icon`，但是却无法显示。 通过不停的搜索，终于找到了解决方法。
react-native-vector-icons 安装教程
weixin_30725467的博客
12-21 92
真的踩了好几天的坑，每次按照网上的一些教程来，都把整个项目都废了，原因：谁动了我的Xcode！！！！！，奉劝各位少动Xcode。前人踩坑，后人继续踩坑。 好了，来总结下本人成功使用react-native-vector-icons 的过程。 一.npm install npm installreact-native-vector-icons --save react-native lin...
react-native-vector-icons（android）的安装与使用
每天进步一点点
06-03 1618
第一步：在react-native 工程目录下通过npm安装react-native-vector-iconsnpm install react-native-vector-icons --save 第二步：分别为android和ios做一些相应的配置Android：在android/app/build.gradle中增加如下脚本：project.ext.vectoricons = [ i...
react-native-vector-icons 安装及使用
frank_hehe的博客
06-17 736
1、安装 yarn add react-native-vector-icons（或者 npm install react-native-vector-icons） 2、react-native link react-native-vector-icons 进行自动连接，如果报错，react-native unlink react-native-vector-icons这样先卸载掉之前的link，然后： 命令运行：pod 'RNVectorIcons', :path => '../node_modul
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-richeditor:react-native富文本编辑器
05-19
react-native-richeditor 本插件借鉴了react-native-webview-richeditor的开源库。 ...yarn add react-native-vector-icons 然后添加本库 在package.json中添加 "dependencies": { "prop-types":
react-native-star-rating：一个React Native组件，用于生成和显示交互式星级
02-05
React本地星评级组件 一个React Native组件，用于... 链接react-native-vector-icons 请参考 用法 道具 Struts 类型 描述 需要 默认 activeOpacity number 0到1之间的数字确定按钮的不透明度。 No 0.2 animation
react native安装配置图标库react-native-vector-icons以及安装配置react-navigation
沛沛呀、
07-10 939
1、项目初始化 //初始化项目 npx react-native init gloryApp //开启react-native服务；此处推荐用yarn，cnpm和npm也可以 yarn start //开启android模拟器；同react-native run-androi npm run android //开启ios模拟器；同react-native run-ios npm run ios 2、安装react-native-vector-icons的icon库链接???? 添加这个库到项目
有关react-native安卓配置react-native-vector-icons图标报错问题
落影随风的博客
04-23 1394
npm上的配置说明链接https://www.npmjs.com/package/react-native-vector-icons 1.按照上面文档的配置还是会报错 说明这个文档没有及时更新， 下面是报错第一个错： Configure project :app WARNING: Configuration 'compile' is obsolete and has been replaced w...
React-Native笔记-react-native-vector-icons异常
ljt2724960661的博客
11-02 637
导入RN项目时,编译Android模块时,会遇到这个异常,如下: What went wrong: A problem occurred configuring project ':react-native-vector-icons'. > Could not resolve all artifacts for configuration ':react-native-vector-i...
react native 0.72版本使用react-native-vector-icons报错
qq_42839797的博客
10-17 539
版本：按照安装react-native-vector-icons。该指令报link未识别。说明当react-native 库已经没有了link指令。为了解决该问题，需要手动添加库。
react-native添加react-native-vector-icons插件android遇到的问题
weixin_30883777的博客
03-05 94
问题 yarn add react-native-vector-icons后图省事使用react-native link来添加native配置，结果run时报错。 ps:安装的需要native的插件不变且多次link会一直给几个配置文件里添加代码，会出现多余代码，最好在link后跟插件名link特定插件。 解决 原因是link配置不完全，android/app/build.gradle...
[RN] React Native 使用 react-native-vector-icons 图标显示问号
weixin_30498921的博客
05-10 852
我在第一次使用 react-native-vector-icons 时图标显示问号 后来在网上查了很多文章，发现原因有两个 1）安装完 react-native-vector-icons 后，没有link 解决方法： 项目根目录下执行 react-native link 2）因为版本关系图标文件名发生变化 或者 图标文件名完全填写错误 解决办法： 在...
react-native-vector-icons 安装以及常见问题处理
Zale的博客
08-10 1411
1.在根目录执行 npm install react-native-vector-icons --save  或者： yarn add react-native-vector-icons --save 2.自动关联 react-native 版本大于0.30时可使用 react-native link; //自动关联 //手动关联可查阅 https://www.npmjs.com/...
解决 React Native 中的常见错误
分享身边生活经验blog
10-12 3273
React Native 是当今最常用的 JavaScript 移动框架之一。React Native 使熟悉 JavaScript 和 React Web 框架的开发人员能够使用类似的方法和原理开发移动应用程序。作为一个 React Native 开发者，你在开发你的应用程序时必然会遇到一些错误。当编译器在运行代码时检测到错误时，它会终止进程并显示错误消息。React Native 中的错误消息非常具有描述性。
React Native跨平台开发实战：从零到一
最新发布
天涯学馆
05-08 1037
为了在应用中实现页面间的跳转，我们可以使用react-navigation库。使用Redux或MobX进行状态管理。，并编写相应的组件。
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" />; ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值