使用react-native-vector-icons@4.5.0引入EvilIcons模块失败求助

我来帮你搞定这个打包报错的问题，这个情况在react-native-vector-icons 4.x版本里挺常见的，主要是Haste模块解析冲突或者图标库的链接配置没到位导致的，试试下面这些解决方案：

1. 先确认包的完整性，重新安装 #

有时候包安装不完整会导致模块缺失，先卸载重装一遍：

• 使用npm：

  npm uninstall react-native-vector-icons && npm install react-native-vector-icons@^4.5.0
  

• 使用yarn：

  yarn remove react-native-vector-icons && yarn add react-native-vector-icons@^4.5.0
  

重装后去node_modules/react-native-vector-icons目录下检查，确认存在EvilIcons.js文件，以及Fonts文件夹里有EvilIcons.ttf字体文件。

2. 手动链接图标库（针对RN 0.60以下版本） #

4.5.0版本的自动链接可能不稳定，尤其是老版本RN，手动链接更可靠：

iOS端操作： #

• 打开你的Xcode项目，把node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf拖拽到项目的Resources目录下（勾选"Copy items if needed"）
• 打开Info.plist，添加字体声明：

  <key>UIAppFonts</key>
  <array>
    <string>EvilIcons.ttf</string>
  </array>
  

Android端操作： #

• 新建android/app/src/main/assets/fonts文件夹（如果不存在的话）
• 复制node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf到这个fonts文件夹里
• 修改android/app/build.gradle，添加以下配置：

  project.ext.vectoricons = [
      iconFontNames: ['EvilIcons.ttf'] // 若需要其他图标字体，可在这里添加
  ]
  
  apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
  

3. 修复Haste模块解析冲突 #

报错里提到的路径指向了react-native本地的fixtures文件，这是Haste解析的问题，我们可以配置忽略这个目录：
在项目根目录创建rn-cli.config.js文件，内容如下：

module.exports = {
  resolver: {
    blacklistRE: /\/node_modules\/react-native\/local-cli\/core\/__fixtures__.*/
  }
};

这个配置会阻止Haste去解析那些测试用的fixtures文件，避免路径混淆。

4. 清除缓存后重新打包 #

缓存也可能导致奇怪的解析问题，清理后再尝试打包：

• 清除RN缓存：

  react-native start --reset-cache
  

• iOS端额外清理：在Xcode中按Command+Shift+K清理构建，再删除DerivedData目录
• Android端额外清理：

  cd android && ./gradlew clean && cd ..
  

按照这些步骤操作后，应该就能解决找不到EvilIcons模块的问题了。

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