React Native中安装Vector Icons后图标显示空白怎么办？

司马怡彤提问于 2026-01-31 08:31:26 阅读 55

框架

刚在项目里安装了@expo/vector-icons，按照文档导入了Ionicons，但页面上就是显示空白。按教程做了一切却还是空白，到底是哪里出问题了？

我执行了npx expo install @expo/vector-icons，然后在组件里这样写：


import Ionicons from '@expo/vector-icons/Ionicons';

function TabBarIcon({ name }) {
  return <Ionicons name={name} size={24} color="tomato" />;
}

但实际运行时只看到文字和按钮，图标区域完全空白。已经试过重新安装依赖、重启metro、检查图标名称拼写，还是没效果。是不是需要额外配置字体文件？

Redux 性能优化组件设计

我来解答赞 6 收藏

反馈

2 条解答

慕容建利 Lv1

这个问题大概率是字体文件没有正确加载导致的，我来帮你梳理一下解决步骤。

首先确认你是不是用 Expo 管理的项目，因为 @expo/vector-icons 依赖于 Expo 的自动配置机制。如果你是纯 React Native 项目而不是 Expo 项目，那这个库可能就不适合你，建议换成 react-native-vector-icons，并且需要手动链接字体文件。

假设你是 Expo 项目，先检查 app.json 或 app.config.js 文件里有没有配置 plugins，确保有这一行：

plugins: ['@expo/vector-icons']

如果没有，加上后重新启动项目，运行 npx expo start -c 清除缓存。注意安全，清除缓存的时候最好备份一下重要数据。

另外一种可能是你使用了自定义的 Metro 配置或者修改过 babel.config.js，这可能导致字体文件没有被打包进去。建议检查这些配置文件是否正常，尤其是 babel.config.js，应该包含这样的内容：

module.exports = function(api) {

  api.cache(true);

  return {

    presets: ['babel-preset-expo'],

  };

};

最后提醒一下，记得检查你的项目是不是在 web 环境下运行，因为某些图标可能在 web 上支持不完全。如果是在 web 上调试，建议先切换到真机或模拟器测试。

按照这些步骤操作应该能解决问题。如果还是不行，可以试着创建一个新的 Expo 项目，单独测试 vector icons 是否正常工作，这样能帮你判断是不是项目本身的问题。

2026-02-17 10:17

程序员爱玲 Lv1

这个问题我之前也遇到过，大概率是因为字体文件没加载成功。虽然你用了 @expo/vector-icons ，但 Expo 项目有时候需要手动确保字体加载完成才能正常使用。

这样更清晰：在你的入口文件（比如 App.js）里，用 useFonts 来加载字体。试试下面的代码：

import React, { useState } from 'react';

import { AppLoading } from 'expo';

import { Ionicons } from '@expo/vector-icons';



export default function App() {

  const [fontsLoaded] = useFonts({

    ...Ionicons.font,

  });



  if (!fontsLoaded) {

    return <AppLoading />;

  }



  return (

    // 你的组件内容

  );

}

关键是这个 useFonts 方法，它会确保字体加载完成后再渲染页面。如果字体没加载好就直接渲染，图标就会显示空白。

另外再确认一下：
1. 图标名称是否正确（大小写敏感），比如 home 而不是 Home。
2. 如果你用的是 bare workflow，可能还需要额外配置 react-native link（不过 Expo 项目一般不用管这一步）。

试一下这个方案，应该就能解决了！

2026-01-31 17:04