【React Native】react-native-vector-icons用法避坑

最新推荐文章于 2025-06-03 09:03:23 发布

原创最新推荐文章于 2025-06-03 09:03:23 发布 · 749 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react native #react.js #javascript

本文档记录了在ReactNative 0.70版本中使用react-native-vector-icons时遇到无法显示图标的问题，以及如何通过将字体文件复制到指定目录并正确引用解决该问题。此外，还介绍了如何在不同图标库之间切换使用。

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

在用React Native开发App时，icon的使用必不可少。官网推荐使用react-native-vector-icons来完成icon的使用。
在学习的过程中碰到了一个问题：一步一步按照官网说明的步骤去使用icon，但是却无法显示。
通过不停的搜索，终于找到了解决方法。

环境：

React Native版本：0.70
@react-navigation/native：6.0.14

安装

npm install react-native-vector-icons

安卓平台设置

将 node-modeles\react-native-vector-icons\Fonts目录下的文件复制到项目andriod\app\src\main\assets\fonts 目录下，如果没有相应的文件夹的话，自己创建一个即可。

注意：无需修改build.gradle文件夹的配置

使用

其实我也是一步一步跟着官网来学习使用的，想知道更加多更加详细的代码请参见React Navigation官网

import Ionicons from 'react-native-vector-icons/Ionicons'

<Ionicons name='home' size={30} color="black"/>

react-native-vector-icons内有着许多的图标库，如AntDesign、FontAwesome、MaterialIcons、FontAwesome 5等等，用法都同上，只要注意更改相应的图标库名称即标签名即可。