React Native无法解析missing-asset-registry-path模块求助

错误信息 #

error: Error: Unable to resolve module missing-asset-registry-path from D:\gp\assets\1-system-iconshome.png: missing-asset-registry-path could not be found within the project or in these directories:
  node_modules
> 1 |  PNG
  2 | →
  3 |
  4 | IHDRH♠U  G        pHYs!8!8☺E 1`☺sRGB  ∟ ♦gAMA  
 a♣♦ IDATx☺ 1S‼A¶  ^ q  N  ☺∟ql  0c/tv& F    
  j u ☻◄   ☻>C RȀ ↔   FF↕r {I↑Ir  \\    ◄ {    w  ▲  `0↑
 §♠C   p ؠCl   _▬ \]  Ώ   "6$ ^ x§ ♣  !Fb§  6邻   T XP \\         
    at ModuleResolver.resolveDependency (D:\gp\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:153:15)    
    at DependencyGraph.resolveDependency (D:\gp\node_modules\metro\src\node-haste\DependencyGraph.js:279:43)
    at D:\gp\node_modules\metro\src\lib\transformHelpers.js:176:21
    at resolveDependencies (D:\gp\node_modules\metro\src\DeltaBundler\buildSubgraph.js:56:25)
    at visit (D:\gp\node_modules\metro\src\DeltaBundler\buildSubgraph.js:107:30)
    at async Promise.all (index 6)
    at async visit (D:\gp\node_modules\metro\src\DeltaBundler\buildSubgraph.js:116:5)
    at async Promise.all (index 9)
    at async visit (D:\gp\node_modules\metro\src\DeltaBundler\buildSubgraph.js:116:5)
    at async Promise.all (index 2)
 BUNDLE  ./index.js

error: Error: Unable to resolve module missing-asset-registry-path from D:\gp\assets\profile.png: missing-asset-registry-path could not be found within the project or in these directories:    
  node_modules
> 1 |  PNG
  2 | →
  3 |
  4 | IHDR(♠   m        pHYs
‼
‼☺  ↑☺sRGB  ∟ ♦gAMA  
 a♣
hIDATx☺ X o∟ ↔      ^_ ‼_ ↑۱E‼oMBBU . B  @(  @ 
U    § 8OU V  H R T  p( ►(vp 7_H  ^{  ݝ s ;gv b/  s2 g   w?→ 󚚚 →   c►   _ DŽ►1   ↓
    at ModuleResolver.resolveDependency (D:\gp\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:153:15)    
    at DependencyGraph.resolveDependency (D:\gp\node_modules\metro\src\node-haste\DependencyGraph.js:279:43)
    at D:\gp\node_modules\metro\src\lib\transformHelpers.js:176:21
    at resolveDependencies (D:\gp\node_modules\metro\src\DeltaBundler\buildSubgraph.js:56:25)
    at visit (D:\gp\node_modules\metro\src\DeltaBundler\buildSubgraph.js:107:30)
    at async Promise.all (index 5)
    at async visit (D:\gp\node_modules\metro\src\DeltaBundler\buildSubgraph.js:116:5)
    at async Promise.all (index 3)
    at async visit (D:\gp\node_modules\metro\src\DeltaBundler\buildSubgraph.js:116:5)
    at async Promise.all (index 2)

相关代码 #

import * as React from "react";
import { Image, StyleSheet, View, Text, Pressable } from "react-native";
import { useNavigation } from "@react-navigation/native";
import FormSection from "../components/FormSection";
import ProfileForm from "../components/ProfileForm";
import { FontFamily, FontSize, Color, Border, Padding } from "../GlobalStyles";

const AndroidLarge1 = () => {
  const navigation = useNavigation();

  return (
    <View style={[styles.androidLarge1, styles.androidLarge1Layout]}>
      <View style={[styles.frameParent, styles.text2Position]}>
        <View style={[styles.frameGroup, styles.groupFlexBox]}>
          <View style={styles.avatarParent}>
            <View style={styles.avatar}>
              <Image
                style={[
                  styles.circle40invisibleIcon,
                  styles.androidLarge1Layout,
                ]}
                resizeMode="cover"
                source={require("../assets/profile.png")} 
              />
            </View>
            <View style={styles.parent}>
              <Text style={[styles.text, styles.textTypo]}>Hello</Text>
              <Text style={[styles.text, styles.textTypo]}>Farmer</Text>
            </View>
          </View>
          <View style={styles.systemIconssettingParent}>
            <Image
              style={styles.systemLayout}
              resizeMode="cover"
              source={require("../assets/iconssetting.png")} 
            />
            <Image
              style={[styles.systemIconsnotification, styles.systemLayout]}
              resizeMode="cover"
              source={require("../assets/iconsnotification.png")} 
            />
          </View>
        </View>
        {/* ... (your existing code) */}
      </View>
      <ProfileForm showHomeIndicator={false} />
    </View>
  );
};

解决方案 #

这个错误是Metro打包器无法正确处理图片资源导致的，按以下步骤排查：

• 检查Metro配置文件
  项目根目录下如果没有metro.config.js，创建一个并添加基础配置：

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

  若已有该文件，确保未错误排除.png等图片格式。

• 清除所有缓存
  执行命令彻底清理缓存：

  npx react-native start --reset-cache
  # 可选：手动清理缓存目录
  rm -rf node_modules/.cache
  rm -rf ios/build # iOS项目执行
  rm -rf android/app/build # Android项目执行
  

• 确认资源路径和命名

  • 校验../assets/profile.png等资源是否存在，路径拼写是否准确（注意大小写，Metro可能严格校验）。
  • 避免资源文件名包含特殊字符或空格，比如将1-system-iconshome.png重命名为system-icons-home.png。

• 重新安装依赖
  若以上步骤无效，尝试重新安装依赖：

  rm -rf node_modules
  npm install
  

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