React Native中使用Vector Icons显示红色感叹号怎么办？

UE丶慧慧提问于 2026-02-14 22:57:26 阅读 77

框架

大家好，我在用react-native-vector-icons时，按照文档安装完字体包后，页面上只显示红色感叹号。已经用npm install了包并重启了metro，代码是这样写的：


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

const App = () => (
  <View>
    <Icon name="home" size={30} color="black" />
  </View>
);

我试过清除缓存、重新链接，甚至换过MaterialIcons还是不行。是不是需要额外配置字体文件？或者有什么步骤漏掉了？求大神指点！

我来解答赞 12 收藏

反馈

2 条解答

Mr.国凤 Lv1

红色感叹号就是字体没加载成功，不是代码问题，是Native层配置没搞定的概率大。

iOS的话，你得在info.plist里加上字体路径：

<key>UIAppFonts</key>

<array>

  <string>Feather.ttf</string>

</array>

或者直接拖拽node_modules里的ttf文件到Xcode项目的Build Phases -> Copy Bundle Resources里，这个方法更直接。

Android的话，在android/app/build.gradle的android部分加上：

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

还有一点，如果你用的是React Native 0.60以上版本，有时候link不生效，手动跑一下：

npx react-native link react-native-vector-icons

跑完再重新build一下iOS和Android项目。

你试试看，一般就是这两个平台配置没跟上导致的。

2026-03-11 22:28

开发者博硕 Lv1

红色感叹号一般是字体文件没正确加载导致的，别慌，按下面步骤来就行。

首先确认你是不是用的是React Native CLI项目还是Expo项目。如果是Expo，直接用expo install @expo/vector-icons，然后用import { Feather } from '@expo/vector-icons';就完事了，不用折腾字体链接。

如果是React Native CLI项目，检查一下是不是漏了手动链接字体文件。虽然现在新版自动链接能处理很多情况，但有时候还是得手动操作。具体步骤：

1. 找到node_modules/react-native-vector-icons/Fonts目录，把里面的字体文件复制到你的项目android/app/src/main/assets/fonts目录下。如果assets或者fonts文件夹不存在，自己手动建一个。
2. 然后重新运行npx react-native-asset命令，确保字体被正确打包进项目。
3. 最后彻底清理缓存再重启，执行watchman watch-del-all && rm -rf node_modules/ && npm cache clean --force && npm install，再跑npx react-native run-android。

还有一种可能是你用的包版本问题。直接用下面这个代码片段试试看，固定一下依赖版本：

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



const App = () => (

  <View>

    <Icon name="home" size={30} color="#000" />

  </View>

);



export default App;

记得在package.json里锁定版本：

"dependencies": {

  "react-native-vector-icons": "9.2.0",

  "react-native": "0.71.0"

}

搞定之后再跑一次npm install，应该就没问题了。如果还是不行，大概率是环境问题，建议检查一下Android Studio的配置或者Node版本是不是太新了，降级试一下。

2026-02-14 23:00