React Native 报错：无法解析导入的./navRoutes模块

核心报错信息 #

Metro打包器抛出错误：
Error: Unable to resolve module ./navRoutes from D:\Programs\React Native\Sucessfully Project\Image Art Gallery\ImageGallery\App.js

Metro的默认文件匹配规则说明：

• 解析单文件导入路径时，会依次匹配后缀为.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx的实体文件
• 如果导入路径指向文件夹，会额外查找文件夹根目录下、符合上述后缀规则的index入口文件

当前报错说明Metro在解析./navRoutes路径时，既没找到同路径下的实体文件，也没找到文件夹下的合法入口文件，错误精准定位到App.js的导入语句行：

1 | import React from 'react';
2 | import Providers from './navRoutes';
|                        ^
3 |
4 | const App = () => {
5 |   return <Providers />;

项目现有结构与代码 #

目录层级 #

项目根目录下文件分布：

• 项目根目录
  • App.js：应用全局入口
  • navRoutes/：导航逻辑存放文件夹（与App.js同级）
    • AuthStack.js：栈导航配置
    • Routes.js：导航容器配置
    • Index.js：导出Providers组件的文件
  • 业务页面组件所在目录

各文件代码片段 #

• App.js 全局入口

import React from 'react';
import Providers from './navRoutes';

const App = () => {
  return <Providers />;
};

export default App;

• navRoutes/AuthStack.js 栈导航配置

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import LoginScreen from './screens/LoginScreen';
import SignUpScreen from './screens/SignUpScreen';
import SplashScreen from './screens/SplashScreen';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

const AuthStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode="none">
        <Stack.Screen name="Splash" component={SplashScreen} />
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Signup" component={SignUpScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AuthStack;

• navRoutes/Routes.js 导航容器配置

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import AuthStack from './AuthStack';

const Routes = () => {
  return (
    <NavigationContainer>
      <AuthStack />
    </NavigationContainer>
  );
};

export default Routes;

• navRoutes/Index.js 提供者组件

import React from 'react';
import Routes from './Routes';

const Providers = () => {
  return (
    // <AuthProvider>
    <Routes />
    // {/* </AuthProvider> */}
  );
};

export default Providers;

问题触发原因 #

• 入口文件名不符合Metro解析规则：navRoutes文件夹下的Providers组件文件被命名为Index.js（大写I开头），但Metro查找文件夹入口时仅识别全小写的index命名文件，严格的大小写匹配规则直接导致查找失败。
• 组件内相对路径层级错误：AuthStack.js位于navRoutes子文件夹内，代码中导入页面组件的路径写为./screens/xxx，实际业务页面目录与navRoutes同级，相对路径应为../screens/xxx，就算路径解析问题解决，后续也会触发二级模块查找报错。
• 导航容器重复嵌套：AuthStack.js内部和Routes.js外层各包裹了一层NavigationContainer，React Navigation规范要求仅能存在单个导航容器，多层嵌套会触发运行时报错。

修复操作步骤 #

• 重命名navRoutes文件夹下的Index.js为index.js，满足Metro的文件夹入口文件命名要求。
• 修正AuthStack.js内的页面导入路径，将业务页面目录的引用从./screens/改为../screens/。
• 移除AuthStack.js内部多余的NavigationContainer包裹层，调整后的有效代码：

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import LoginScreen from '../screens/LoginScreen';
import SignUpScreen from '../screens/SignUpScreen';
import SplashScreen from '../screens/SplashScreen';
import HomeScreen from '../screens/HomeScreen';

const Stack = createStackNavigator();

const AuthStack = () => {
  return (
    <Stack.Navigator headerMode="none">
      <Stack.Screen name="Splash" component={SplashScreen} />
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="Signup" component={SignUpScreen} />
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
};

export default AuthStack;

• 清除Metro缓存后重启打包服务，执行命令npx react-native start --reset-cache，避免旧的文件索引缓存残留导致解析失败。

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