Expo React Native项目中@expo/vector-icons不显示且报错求助

问题重现 #

新建Expo项目后引入@expo/vector-icons，代码如下：

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

<MaterialCommunityIcons name="plus-box" size={22} />

项目核心依赖：

"@expo/vector-icons": "^13.0.0",
"expo": "~48.0.6",
"react": "18.2.0"

图标完全不可见，同时触发错误：

possible Unhandled Promise Rejection (id: 0):
Error: Directory for 'file:///Users/home/Library/Developer/CoreSimulator/Devices/7DACCA8B-F88B-4249-B11F-32A19D9CE235/data/Containers/Data/Application/34AF5A49-BEA8-4B67-BE98-C6FA1CFE705C/Library/Caches/ExponentExperienceData/%2540anonymous%252Faut-56300b06-9003-4b04-ae15-c87d255bd288/ExponentAsset-b62641afc9ab487008e996a5c5865e56.ttf' doesn't exist. Please make sure directory '/Users/home/Library/Developer/CoreSimulator/Devices/7DACCA8B-F88B-4249-B11F-32A19D9CE235/data/Containers/Data/Application/34AF5A49-BEA8-4B67-BE98-C6FA1CFE705C/Library/Caches/ExponentExperienceData/%40anonymous%2Faut-56300b06-9003-4b04-ae15-c87d255bd288' exists before calling downloadAsync.

解决步骤 #

• 清除缓存：

  1. 终止当前Expo开发服务，执行命令清除项目缓存：

     npx expo start -c
     

  2. 关闭iOS模拟器，通过顶部菜单Device > Erase All Content and Settings清除模拟器所有数据，重启模拟器后重新运行项目。

• 修复依赖（可选）：
  若缓存清除后问题仍存在，删除项目根目录的node_modules文件夹和package-lock.json（或yarn.lock），重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 检查组件使用：

  1. 给图标添加明确的color属性，避免因颜色与背景一致导致视觉上不可见：

     <MaterialCommunityIcons name="plus-box" size={22} color="#333" />
     

  2. 确认name属性值与Material Community Icons官方库中的图标名称完全一致，注意拼写和大小写。

内容的提问来源于stack exchange，提问作者Björn F