React Native应用运行报错：react-native-vector-icons/MaterialIcons模块解析异常

我碰到过不少开发者在使用react-native-vector-icons时遇到这个Haste包冲突的错误，提示Error: While resolving module react-native-vector-icons/MaterialIcons, the Haste package react-native-vector-icons was found，卸载包确实能让项目跑起来，但如果你的项目需要图标库，完全不用这么极端，咱们可以试试这些修复步骤：

先搞清楚问题根源 #

这个错误大多是因为Haste模块系统（React Native早期的模块解析机制）和现在Metro使用的模块解析逻辑冲突导致的，尤其是在React Native 0.60+版本中，Haste已经被逐步弃用，旧的配置残留很容易引发这类问题。

修复步骤 #

1. 重新正确安装并配置图标库

如果之前的安装配置有遗漏，先重新来一遍：

• 重新安装依赖：

  npm install react-native-vector-icons --save
  # 或者用yarn
  yarn add react-native-vector-icons
  

• iOS端（CocoaPods）：
  打开ios/Podfile，添加以下内容：

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
  

  然后在ios目录下运行：

  pod install
  

• Android端：
  打开android/app/build.gradle，在文件末尾添加：

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

  然后同步Android Studio的gradle配置。

2. 彻底清理缓存

缓存是这类冲突的重灾区，一定要清干净：

• 重置Metro缓存：

  npx react-native start --reset-cache
  

• 清除npm/yarn缓存：

  npm cache clean --force
  # 或者yarn
  yarn cache clean
  

• 关闭当前的开发服务器，重启模拟器/真机后再重新运行项目。

3. 移除旧的Haste相关配置

检查项目根目录的rn-cli.config.js或者metro.config.js，如果里面有关于Haste的配置（比如hasteImplModulePath、包含react-native-vector-icons的Haste白名单），直接删掉这些配置项。

如果你的metro.config.js是旧版本的配置，建议替换成官方默认的配置：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

如果以上步骤都无效 #

那可能是项目中其他依赖和react-native-vector-icons的Haste配置冲突过于严重，这时候卸载包确实能临时解决问题，但如果需要图标功能，也可以考虑替代方案，比如@expo/vector-icons（它和react-native-vector-iconsAPI兼容，且适配Metro更好）。

内容的提问来源于stack exchange，提问作者Vishal Raut