我来帮你一步步排查这个路径问题，你遇到的核心问题是文件实际位置和导入路径不匹配，再加上可能的缓存或导出配置问题，导致Metro打包器找不到对应的模块。

首先，确认文件的实际位置和命名 #

从报错信息能看到，打包器一直在C:\Users\<User>\reactnewapp\（App.js所在的根目录）下查找LoginScreen相关文件，但显然你的LoginScreen不在这个目录里（你提到它在components文件夹）。这里你之前用的../components/LoginScreen是错误的——../表示上一级目录，根目录的上一级是Users文件夹，肯定找不到你的组件。正确的路径应该是./components/LoginScreen（./表示当前目录，也就是根目录，所以./components就是根目录下的components文件夹）。

除此之外，还要检查这几点：

• 文件名大小写：Windows文件系统不区分大小写，但Metro打包器是严格区分的！比如如果你的文件是loginscreen.js，但你导入的是LoginScreen，就会报错。
• 文件扩展名：确保你的文件后缀是.js/.jsx/.tsx这类Metro默认识别的格式（报错信息里已经列出了所有支持的扩展名），如果是其他后缀，需要在metro.config.js里额外配置。

检查组件的导出方式 #

你的App.js里导入的是MainNavigator，要确认LoginScreen文件里的导出是否匹配：

• 如果是默认导出：

  // LoginScreen.js
  export default MainNavigator;
  

  那导入的时候不需要加花括号，也就是你现在写的import MainNavigator from './components/LoginScreen';是对的。
• 如果是命名导出：

  // LoginScreen.js
  export const MainNavigator = ...;
  

  那导入的时候必须加花括号：import { MainNavigator } from './components/LoginScreen';，否则会找不到这个模块。

清除Metro缓存（关键步骤） #

有时候Metro的缓存会导致路径解析异常，即使你改对了路径也会报错，试试这个操作：

1. 关闭当前运行的Metro终端窗口
2. 在项目根目录运行命令：

   npx react-native start --reset-cache
   

3. 等Metro重启完成后，再重新运行npx react-native run-android

解决路径提示不显示的问题 #

编辑器（比如VS Code）不提示路径，是因为没有正确识别React Native的项目结构。你可以在项目根目录创建一个jsconfig.json文件，内容如下：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"]
    }
  },
  "exclude": ["node_modules"]
}

配置后，你就可以用@components/LoginScreen这样的别名来导入组件，编辑器也会自动提示路径了。

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