RN（react native）入坑指南-05,使用图标字体Fontawesome

最新推荐文章于 2024-08-23 07:46:25 发布
最新推荐文章于 2024-08-23 07:46:25 发布
阅读量8.5k 收藏
点赞数 4
分类专栏： 跟我学React Native 文章标签： native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pkaq_/article/details/51168435
版权
本文是RN（React Native）中使用图标字体Fontawesome的入门指南，介绍了先决条件，如rn 0.23、npm 3.7.3等，以及在winX环境下安装Fontawesome所需的Python、Visual Studio C++和rnpm的注意事项。通过react-native-vector-icons组件，开发者可以方便地在rn应用中集成和使用图标。
摘要由CSDN通过智能技术生成
先决条件
  • rn 0.23
  • npm 3.7.3
  • node 5.9.1
  • system winX
  • python 2.7.x
前言

　　开发过程中各式各样的图标自然少不了,如果能使用fontawesome等图标字体,自然可以带来极大的方便,然而在rn中并无法直接引用,还好已经有人做好了相关组件,react-native-vector-icons便是其中的佼佼者.
　　如果你对此组件感兴趣可以去github页面star此项目
　　https://github.com/oblador/react-native-vector-icons

安装

　　官方README如何使用已经写得很详细,此处需要指出的是几个注意点.
　　由于安装时依赖node-gyp,而node-gyp在win下又会有一堆依赖这里以winX为例说一下winX下需要安装的依赖

　　1.python环境:截止博客发表时仅支持到2.7.X版本,如果是下载的zip包需要将python路径添加到环境变量中

　　2.vs c++:为了方便 我直接安装了Microsoft Visual Studio Express

　　3.rnpm:npm install rnpm -g

使用</
最低0.47元/天 解锁文章
PKAQ
关注
专栏目录
React Native 中使用图标
北冰洋没有野人
02-20 2928
在React Native 中使用 react-native-vector-icons 插件，android 和 ios 的安装步骤是不一样的 ios安装步骤: npm install --save react-native-vector-icons 复制 npm 上 react-native-vector-icons 上的 List of all available fonts to copy...
ReactNative-图标
weixin_45621649的博客
03-01 231
React-Native iconfont图标 下载阿里图标代码 在app根目录中创建新目录src/assets/fonts用来存放字体文件，将 iconfont.ttf 拷贝到该目录下 打开package.json文件，配置字体路径 "rnpm": { "assets": [ "./src/assets/fonts/" ] } 执行以下命令，执行完成后...
FontAwesome.Sharp 使用与安装教程
最新发布
gitblog_00037的博客
08-23 606
FontAwesome.Sharp 使用与安装教程 FontAwesome.SharpA library for using Font Awesome in WPF & Windows Forms applications项目地址:https://gitcode.com/gh_mirrors/fo/FontAwesome.Sharp 项目简介 FontAwesome.Sharp 是一个基于 .N...
React-Native项目矢量图标库（react-native-vector-icons）
mapbar_front的博客
01-22 2003
在一个前端的工程项目中，一个必不可少的功能就是图标库的使用。相比于图片，矢量图标库，有容积小，不失真，减少资源加载等优秀特性。
react-native中关于图标的使用
qq_67452534的博客
07-13 463
之前的时候，我在导航中直接用到图标，那个时候一直显示不出来正确的图标，后面看过其他的文章，找到了原因，由此，写下这篇文章。2、如果是安卓的，就文件android\app\build.gradle中添加如下代码。4、注意：如果没有效果，就重新启动项目即可。
RN 使用第三方字体
weixin_33901843的博客
11-16 603
Android： 程序会尝试在assets/fonts目录下查找字体文件，如果没找到会使用默认的字体 所以将文件放到路径下才能生效！ [project root]/android/app/src/main/assets/fonts/BoLeYaYa.ttf 使用字体时直接引用即可 fontStyle: { fontFamily: 'BoLeYaYa' ...
react-native-web-webview:React Native用于RN的WebView的Web实现
05-17
react-native-web-webview React Native用于RN的WebView的Web实现 入门 $ npm install react-native-web-webview --save 别名打包您的webpack配置中： resolve: { alias: { 'react-native': 'react-native-web...
react-native-wheel-picker ★190 - React原生跨平台选择器。
06-08
如何使用运行命令对于使用 RN 0.40 或更高版本的应用程序，请运行 npm i react-native-wheel-picker --save 对于使用 RN 0.39 或更低版本的应用程序，请运行 npm install --save --save-exact [email protected ] 在...
react-native-nfc-manager：用于Android和iOS的React Native NFC模块
02-04
react-native-nfc-manager 将NFC功能引入React Native。 受和启发 欢迎捐款！ iOS 14模拟器问题 如，使用CoreNFC时，iOS 14模拟器将崩溃，但是实际的iOS 14设备可以工作。 安装 # RN >= 0.60 npm i --save react-...
react-native 使用vector-icons图标库
kecongxiao的博客
08-31 896
新建工程 react-native init Demo 进入工程 cd Demo 运行，检查是否报异常 react-native run-android 如果有异常，请检查是否是babel preset版本问题，参考http://blog.csdn.net/xkc_0706/article/details/77367308 使用npm安装图标库 npm install react-nat
react-native-fontawesome:Font Awesome 5 的官方 React Native 组件
07-23
react-native-fontawesome Font Awesome 5 React Native 组件，使用 SVG 和 JS 尺寸 特征 双色调 掩蔽 电源转换 常见问题 如何从两种不同的样式导入相同的图标？ 我认为摇树不起作用； 有什么建议吗？ 如何帮助 贡献者 介绍 嘿！ 我们很高兴你在这里... 升级字体真棒？ 如果您过去使用过 Font Awesome（版本 4 或更早版本），那么在您深入研究之前，您应该了解一些内容。 https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4 开始 这个包用于与 React Native 集成。 如果您不使用 React Native，那么它不会帮助您。 前往我们的“入门”页面获取一些指导。 https://fontaweso
【react native】react natvie 使用图标库(安卓)
七十多岁的人了、
07-31 477
【REACT】react natvie 使用图标库(安卓)
React Native 中Iconfont图标使用
luke312的博客
03-03 787
文章目录react-native-svg-uri&阿里Iconfont矢量图标使用记录使用方法1.组件下载2.阿里Iconfont下载3.添加svg标签4.使用 react-native-svg-uri&阿里Iconfont矢量图标使用记录 使用方法 svg-uri组件下载 1). 引入 2). 创建工具类 阿里Iconfont图标下载 添加svg标签 使用 1.组件下载 yarn add react-native-svg-uri ----------------------------
react-native 启动屏及App图标设置
weixin_43947842的博客
09-07 2103
学习目标： ios参考链接 https://www.jianshu.com/p/9ae43558fce6 提示：这里可以添加学习目标 例如：一周掌握 Java 入门知识 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出：
react-native系列(12)图标篇：使用阿里字体库iconfont图标和svg详解
@黄小泽的个人博客
03-05 7400
在前端开发中，经常会用到iconfont图标库来管理图标，在RN开发中有时候同样需要如此。在百度上搜索过RN相关的图标管理方案，发现都较为复杂。于是写下了本篇博客，为大家介绍另外两种更优化的图标应用的方案，供大家学习参考。 iconfont图标 该方案同样适用于字体变更。从iconfont库下载好图标脚本，结构如下： 打开iconfont.ttf文件，我们看一下字体全称是什么？正常情况下...
ReactNative如何使用自定义的Iconfont
weixin_34342578的博客
04-07 417
在App包的构成中图片资源是比较占大小的，所以我们可以利用Iconfont来替代原来的png或者jpg单色图标，iconfont的优点是占Size小、支持任意大小不失真、支持任意颜色设置、平台化管理icon等等。 当App项目的大小达到一定规模时，App包的Size也会随之增大，这个时候我们一般会对App包的Size做分析优化来达到减少包大小的目的，利用iconfont来替代项目中原有的...
python 图标字体_RN（react native）入坑指南-05,使用图标字体Fontawesome
weixin_39926016的博客
12-07 173
先决条件rn 0.23npm 3.7.3node 5.9.1system winXpython 2.7.x前言开发过程中各式各样的图标自然少不了,如果能使用fontawesome等图标字体,自然可以带来极大的方便,然而在rn中并无法直接引用,还好已经有人做好了相关组件,react-native-vector-icons便是其中的佼佼者.如果你对此组件感兴趣可以去github页面star此项目htt...
Rn配置项目名称和图标
明知山
06-29 253
修改名称 找到项目android/app/src/main/res/values/strings.xml文件 <resources> <string name="app_name">明知山</string> </resources> 修改图标 替换android/app/src/main/res下所有对应的图标，名称完成跟它一样 推荐图标生成网站图标工厂 能自动生成各种格式的图标 查看效果 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值