react-native引入react-native-vector-icons

已于 2023-09-04 16:46:40 修改
阅读量677 收藏
点赞数
分类专栏： ReactNative 文章标签： react native android react.js
于 2021-08-06 15:46:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35958891/article/details/119456656
版权
本文详细介绍了如何在React Native项目中引入并配置react-native-vector-icons库，包括安装依赖、Android代码配置、字体文件拷贝以及如何在应用中使用这些图标。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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-native-vector-icons/fonts.gradle"

3、将fonts拷到Android目录下

在这里插入图片描述

了解本专栏 订阅专栏 解锁全文 超级会员免费看
React Native框架开发APP，安装免费的图标库（react-native-vector-icons）并使用详解
Zh.快乐的程序猿的博客
03-28 1451
React Native框架开发APP，安装免费的图标库（react-native-vector-icons）并使用详解
react-scripts打包react-native-web应用关于react-native-vector-icons报错experimental syntax ‘jsx‘
最新发布
l603546459的博客
11-07 826
react-scripts打包react-native-web应用关于react-native-vector-icons报错，SyntaxError: C:\haoye\iplayjoy\kujiglobal\node_modules\react-native-vector-icons\lib\create-icon-set.js: Support for the experimental syntax 'jsx' isn't currently enabled
React Native项目中集成react-native-vector-icons
iOS_开发
08-10 378
????????关注后回复“进群”，拉你进程序员交流群????????作者丨xiangzhihong来源：https://segmentfault.com/a/119000003996...
React-Native项目矢量图标库（react-native-vector-icons）
mapbar_front的博客
01-22 2966
在一个前端的工程项目中，一个必不可少的功能就是图标库的使用。相比于图片，矢量图标库，有容积小，不失真，减少资源加载等优秀特性。
react-native之react-native-vector-icons
dingqk的博客
08-06 1670
在RN中使用react-native-vector-icons图标库引用方式，在项目根目录打开命令行执行以下命令 npm install react-native-vector-icons –save react-native link react-native-vector-icons 打开xcode点击想目—》info.plist 就能查到已经被引用，如下图：（以iOS为例） 随后再清一下...
ReactNative 使用矢量图标 react-native-vector-icons
luolin2611的博客
07-11 4723
一、概述    矢量图标的好处是：可以自定义图标大小，颜色，这样解决了指定死图标的灵活性。但是跨平台应用开发中，ReactNative不像Ionic那样自带矢量图标，针对这问题，引出RN插件 react-native-vector-icons。    GitHub地址：https://github.com/oblador/react-native-vector-icons    废话不多说开始配置...
使用react-native-vector-icons
m0_69210482的博客
03-06 707
React Native Vector Icons是一个在GitHub上非常受欢迎的React Native图标库。它提供了许多常见的图标集，如FontAwesome和Ionicons等。使用这个库可以简化在React Native项目中使用图标的过程。
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-vector-icons,React Native可自定义图标，支持导航栏/选项卡栏/工具栏Android、图像源和完整样式。.zip
09-26
React Native Vector Icons库就是基于这一框架，为React Native应用引入了矢量图标的解决方案。 Vector Icons库提供的图标通常以SVG（Scalable Vector Graphics）格式存在，这种格式的优点在于图标可以无限缩放而不...
react-native-vector-icons：React Native的可自定义图标，支持NavBarTabBar，图像源和完整样式
02-05
非常适合按钮，徽标和导航/标签栏。 易于扩展，样式化和集成到您的项目中。 目录 赞助商 如果您觉得图书馆有用，请考虑。 我计划将回购分成一个单回购，以实现图标集的单独版本控制，更好的性能，更小的捆绑包以及社区更容易发布自己的版本。 捆绑的图标集 。 由AntFinance设计（ 297个图标） ，丹尼尔·布鲁斯（ 411图标） 亚历山大Madyankin和罗马沙明（v1.10.1，70个图标） 由科尔比米斯＆贡献者（v4.28.0，285个图标） 由戴维·甘迪（V4.7.0，675个图标） ，Inc.的 （v5.13.0，1588（免费） 7842 （pro）图标） 由凯南京
react-native-icons.zip
09-17
react-native-icons ,react-native-icons 是 React Native 简单易用的图标组件。当前支持 4...
react-native-vector-icons的简单使用
05-07
react-native-vector-icons的简单使用, index.ios.js文件 等主要代码
React-Native: react-native-vector-icons
qq_37147123的博客
11-27 472
react-native-vector-icons的使用，以及导入iconfont字体。
react-native中使用react-native-vector-icons图标库
一键写代码的博客
12-28 3842
react-native-vector-icons 内置了FontAwesome、 antDesign等常用图标库，还可以支持自定义。 RN0.6以上如何使用？ 1、安装： npm i react-native-vector-icons -D 安装命令。 2、安装完成后，还是需要执行 react-native link 虽然react-native 0.6版本以上有了autolink 。但是还是需要执行一下，否则图标不显示。 3、重新安装app后，引入使用。 import Icon from 'react-
react-native-vector-icons 使用
wilson的专栏
06-26 392
react-native-vector-icons 使用 react-native-vector-icons 一. 切换到工程目录，执行 执行安装命令 npm install react-native-vector-icons --save 或者 yarn add react-native-vector-icons 注意：目前npm5存在安装新...
react native 中使用react-native-vector-icons
weixin_30478619的博客
08-10 131
1.引入依赖 cnpm install react-native-vector-icons --save 2.LINK原生 react-native link react-native-vector-icons 若成功的话会看到如下文件 3.在组件中引入 import Icon from 'react-native-vector-icons/Ionic...
RN 之 react-native-vector-icons
心中的舞台
05-27 463
- 接下来介绍一下 在 RN 中使用 react-native-vector-icons 首先,看一下我RN当前的版本 在RN项目中 建议使用yarn 下载组件包 yarn add react-native-vector-icons 再看 react-native-vector-icons 的 先看看GitHub文档时怎么介绍的 我按照大概的意思是分这几个步骤 一： 找到项目底下 android/app/build.gradle 文件 （不是android/build.gradle 文件）
ReactNative系列之图标组件react-native-vector-icons的使用
Define_best的博客
10-30 1460
ReactNative系列之图标组件react-native-vector-icons的使用
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
发出的红包

打赏作者

九段刀客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值