react-native-vector-icons添加自定义字体

最新推荐文章于 2024-08-09 07:17:58 发布
最新推荐文章于 2024-08-09 07:17:58 发布
阅读量2.8k 收藏
点赞数
分类专栏： react native 文章标签： react native 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/v619498372/article/details/79813379
版权
本文介绍了如何在React Native项目中使用react-native-vector-icons添加自定义字体。通过从阿里图标库下载SVG图标，上传到IcoMoon生成字体文件，然后将.ttf和selection.json放入项目指定目录，并创建JS文件进行配置。最后，导入并使用自定义字体，确保运行项目。如果遇到问题，可以尝试执行`react-native link`和`react-native run-android`。
摘要由CSDN通过智能技术生成

首先我们得保证自己已经添加了react-native-vector-icons这个库，至于怎么添加请自行查看官方文档
react-native-vector-icons文档链接

react-native-vector-icons官方添加自定义字体一共有三种方法
这里写图片描述
我们现在已第三种方法作为示范（android为例）
1. 首先我们可以到阿里的图标库下载自己要用到的图标（记得是要以svg的格式下载）
2. 把下载下来的svg图标上传到IcoMoon上
3. IcoMoon的地址链接
点击Import lcons上传图标
这里写图片描述

添加完后点击下方的 Generate Font
这里写图片描述
跳转到另一个页面

最低0.47元/天 解锁文章
Smites
关注
专栏目录
react-native引入react-native-vector-icons
九段刀客的博客
08-06 551
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-icons.zip
09-17
react-native-icons ,react-native-icons 是 React Native 简单易用的图标组件。当前支持 4...
react-native 引入、添加、使用自定义字体
weixin_33716154的博客
12-13 4734
最终目的 在 react-native 中，可以对 使用形如下面的配置而不报错： fontFamily: 'HelveticaNeue-CondensedBold', 复制代码前提 所有字体文件都是资源而已。我们只需要按照原生的形式，将资源引入之后，即可搞定。 0、前期处理 在根目录下创建文件夹：assets/fonts/，将字体文件(*.ttf)放在这里。 1、iOS 引入字体 将根目录下的 ...
`react-native-vector-icons` 教程
最新发布
gitblog_00635的博客
08-09 507
react-native-vector-icons 教程 react-native-vector-iconsCustomizable Icons for React Native with support for image source and full styling.项目地址:https://gitcode.com/gh_mirrors/re/react-native-vector-ico...
React Native 引入字体
楠辞琦咎 难上加楠 出琦止胜
10-14 571
react native 引入字体
react native 图标字体
CY的博客
05-05 1449
IOS的问题比较少，直接使用客户端同事给出的字体名称就可以直接使用 { fontFamily: 'customFont' } 这个字体名称是他们在外层客户端里面已经打包好了的，我可以直接通过名称调用 自己打包字体教程如下 adding-custom-fonts-to-react-native 比较棘手的是安卓的字体使用，他们的字体是放在assets目录下的 我尝试
react-native-vector-icons 和 自定义字体图标
weixin_34032827的博客
09-04 183
为什么80%的码农都做不了架构师？>>> ...
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开发者提供高度可定制的矢量图标。这个库使得在React Native应用中集成图标变得简单且高效，无论是用于导航栏、选项卡栏、工具栏，还是作为...
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-vector-icons的简单使用
05-07
react-native-vector-icons的简单使用, index.ios.js文件 等主要代码
react native中添加自定义字体
koufulong的博客
12-07 1535
1、在项目根目录下，创建文件夹assets/fonts，并且把所需要的字体文件（.ttf）放进来, 2.ios端 （1）将字体文件添加到工程目录中，在工程中的项目文件下下创建Fonts文件夹，将字体文件添加进去 （2）在info.plist中添加 <key>UIAppFonts</key> <array> <string>Barlow-Regular.ttf</string> <string>Barlow-Black.tt
RN TSX基于react-native-vector-icons和iconfont.cn 的生成自定义Icon组件的工具
BA陈的博客
03-08 2854
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
react-native 添加 ttf 格式的字体
阳阳的博客
06-04 315
3. cli版本0.69以上的执行 npx react-native-asset；5. 然后页面里就可以用了，字体ttf文件名字不要改，UI怎么给你，你就怎么放项目里。如果第一次加字体，会提示你没有字体目录，会给你新建一个目录，并且将字体存放进去。用法示例： fontFamily: 'DIN Alternate Bold'
React Native 添加自定义字体
weixin_46086458的博客
07-15 916
本文主要介绍 react native 使用 react-native-asset 添加自定义字体并使用。并列出我在设置自定义字体时遇到的问题，以及解决方案分享。
React Native使用react-native-vector-icons和iconFont做字体图标
徐同保的专栏
04-06 649
Icon.js: import { createIconSet } from 'react-native-vector-icons' import fontFile from '../../static/fonts/iconfont.ttf' import iconfontJson from '../../static/fonts/iconfont.json' const getIconOption = () => { let glyphMap = {} if ( ...
react-native自定义iconfont图标字体
weixin_33804582的博客
05-30 293
图标库react-native-vector-icons的简单使用,图片,按钮,标签视图,导航条 安装 npm install react-native-vector-icons --save (回车) 复制代码 关联 react-native link react-native-vector-icons 复制代码 使用 import Ionicons from 'react-native...
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 ``...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值