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

最新推荐文章于 2025-07-04 12:03:00 发布

PKAQ

最新推荐文章于 2025-07-04 12:03:00 发布

阅读量8.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：跟我学React Native 文章标签： native

本文链接：https://blog.youkuaiyun.com/pkaq_/article/details/51168435

跟我学React Native 专栏收录该内容

11 篇文章

订阅专栏

本文是RN（React Native）中使用图标字体Fontawesome的入门指南，介绍了先决条件，如rn 0.23、npm 3.7.3等，以及在winX环境下安装Fontawesome所需的Python、Visual Studio C++和rnpm的注意事项。通过react-native-vector-icons组件，开发者可以方便地在rn应用中集成和使用图标。

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

先决条件

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

使用

确保以上三点没问题后,可以通过如下命令安装本组件

    npm install react-native-vector-icons --save

由于我是开发android App,所以依据官方文档继续执行

    rnpm link

在所需使用图标的地方,这里采用的是es6的写法,es5的写法也是可以的

    import Icon from 'react-native-vector-icons/FontAwesome';

使用组件

    <Icon name="qq" size={30} color="#52C0FE"/>

备注

参数说明

参数	类型	默认值	说明
name	String	无	图标名称,这里需要注意的是如果你使用font-awesome的图标,例如qq仅写qq即可,无需写fa fa-qq
size	数值	12	图标的大小
color	rn支持的颜色格式	自动继承	图标的颜色

支持的图标

Entypo by Daniel Bruce (411 icons)
EvilIcons by Alexander Madyankin & Roman Shamin (v1.8.0, 71 icons)
FontAwesome by Dave Gandy (v4.5, 605 icons)
Foundation by ZURB, Inc. (v3.0, 283 icons)
Ionicons by Ben Sperry (v2.0.1, 733 icons)
MaterialIcons by Google, Inc. (v2.1.1, 893 icons)
Octicons by Github, Inc. (v3.5.0, 196 icons)
Zocial by Sam Collins (v1.0, 100 icons)

错误记录
未正确安装python会出现

-gyp ERR! configure error 
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack

未正确安装vs c++会出现

未能加载Visual C++ 组件VCBuild.exe ”，要求安装.NET FramMS Build 、.NET Framework 2.0 SDK 、 Microsoft Visual Studio 2005。