React Native报错：TurboModuleRegistry无法找到VectorIcons模块

报错信息： #

Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'VectorIcons' could not be found. Verify that a module by this name is registered in the native binary.Bridgeless mode: false. TurboModule interop: false. Modules loaded: {"NativeModules":["PlatformConstants","LogBox","Timing","AppState","SourceCode","BlobModule","WebSocketModule","DevSettings","DevToolsSettingsManager","Networking","Appearance","DevLoadingView","HeadlessJsTaskSupport","UIManager","DeviceInfo","DeviceEventManager","RNGestureHandlerModule","I18nManager"],"TurboModules":[],"NotFound":["NativePerformanceCxx","NativePerformanceObserverCxx","RedBox","BugReporting","VectorIcons"]}, js engine: hermes
LOG  Running "AssignmentProject" with {"rootTag":11}

解决步骤： #

• 确认依赖安装完整
  执行命令重新安装依赖：

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

• 验证自动链接并同步原生依赖

  • iOS：进入项目ios目录，执行pod install
  • Android：React Native 0.60+会自动链接，若未生效可检查后续手动配置步骤

• 手动补全原生配置（自动链接失败时）

  • iOS端：
    1. 打开Xcode项目，将node_modules/react-native-vector-icons/Fonts下的所有字体文件拖入项目，勾选"Copy items if needed"
    2. 在Info.plist中添加字体声明：

       <key>UIAppFonts</key>
       <array>
         <string>AntDesign.ttf</string>
         <string>Entypo.ttf</string>
         <string>EvilIcons.ttf</string>
         <string>Feather.ttf</string>
         <string>FontAwesome.ttf</string>
         <string>FontAwesome5_Brands.ttf</string>
         <string>FontAwesome5_Regular.ttf</string>
         <string>FontAwesome5_Solid.ttf</string>
         <string>Foundation.ttf</string>
         <string>Ionicons.ttf</string>
         <string>MaterialIcons.ttf</string>
         <string>MaterialCommunityIcons.ttf</string>
         <string>SimpleLineIcons.ttf</string>
         <string>Octicons.ttf</string>
         <string>Zocial.ttf</string>
       </array>
       

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

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

• 清理缓存并重新构建
  执行以下命令清理缓存，再重新启动项目：

  npx react-native start --reset-cache
  # iOS额外执行：
  cd ios && pod deintegrate && pod install && cd ..
  # Android额外执行：
  cd android && ./gradlew clean && cd ..
  

• 重新运行项目
  iOS在Xcode中执行Clean Build Folder（快捷键Cmd+Shift+K）后运行；Android直接通过npx react-native run-android启动

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