React Native Vector Icons图标显示空白怎么办？

UX-星语提问于 2026-02-17 16:39:22 阅读 19

框架

刚安装react-native-vector-icons后，代码写好了但图标全是空白，我按教程做了但没效果。

尝试过：react-native link和重启metro，还手动复制了字体文件到android/app/src/main/assets，但安卓模拟器还是不显示。

这是我的代码：

import Icon from 'react-native-vector-icons/Entypo';
function App() {
  return (
    <Icon name="home" size={30} color="#900" />
  );
}

控制台没报错，就是图标位置显示空格，是不是少了什么配置步骤？

我来解答赞 3 收藏

反馈

1 条解答

宁蒙 Dev Lv1

这个问题大概率是字体没正确加载，拿去改改试试。首先确保你用的是最新版本的react-native-vector-icons，老版本可能有兼容性问题。

安卓这边有几个关键点要检查：第一个是android/app/build.gradle文件，确认里面加了这行代码：apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"，没加的话赶紧补上。

第二个是重点，很多人容易忽略清理缓存。删除android/app/build文件夹，然后执行./gradlew clean，再重新编译项目。react-native run-android跑一遍。

如果还是不行，手动处理一下：找到node_modules/react-native-vector-icons/Fonts目录，把Entypo.ttf这个字体文件复制到android/app/src/main/assets/fonts目录下，没有这个目录就自己建一个。

最后给你个完整的示例代码，稍微调整下写法：

import React from 'react';

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



const App = () => {

  return (

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

  );

}



export default App;

记得重启metro打包服务，有时候缓存会导致修改不生效。这些步骤都做了还出问题，那就是环境有问题，建议检查下RN版本和依赖冲突。

2026-02-17 17:03