反应导航错误无法解析 originModulePath答案

【问题标题】：React Navigation ERROR Unable to resolve originModulePath反应导航错误无法解析 originModulePath
【发布时间】：2020-08-05 16:45:00
【问题描述】：

我是编码新手，并且对本机反应很敏感。我一直在尝试设置一个只有一些基本页面的应用程序来练习反应导航，但一直出错。

Failed building JavaScript bundle.
Unable to resolve "./src/navigation/MainTabs" from "src/navigation/AppNavigator.js"

我正在使用 expo 并安装了这些 npm：

npm install @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack

到目前为止，这是我的代码：

App.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from './src/navigation/AppNavigator.js';

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

export default App;

AppNavigator.js

import * as React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import MainTabs from './src/navigation/MainTabs';

const Stack = createStackNavigator();

const AppNavigator = () => {
 return (
   <Stack.Navigator>
     <Stack.Screen name='MainTabs' component={MainTabs} />
   </Stack.Navigator>
 );
}

export default AppNavigator;

MainTabs.js

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import PartyMenuScreen from './src/screens/PartyMenuScreen';
import TableMenuScreen from './src/screens/TableMenuScreen';
import VacationMenuScreen from './src/screens/VacationMenuScreen';


const Tabs = createBottomTabNavigator();

const MainTabs = () => {
  return (
    <Tab.Navigator>
     <Tab.Screen name='Party Games' component={PartyMenuScreen} />
     <Tab.Screen name='Table Games' component={TableMenuScreen} />
     <Tab.Screen name='Vacation Games' component={VacationMenuScreen} />
    </Tab.Navigator>
  );
}

export default MainTabs;

我已尝试重新安装 npm 模块并重命名文件路径。除此之外，我不确定该怎么做。我相信这可能与我的依赖关系有关，但我不确定如何解决它们。

【问题讨论】：

标签： react-native expo react-navigation react-navigation-v5

【解决方案1】：

AppNavigator.js 的导入路径有错误

import MainTabs from './src/navigation/MainTabs';

从错误消息中，我假设您在文件夹层次结构中具有同一级别的 AppNavigator.js 和 MainTabs.js。将上面的导入替换为以下：

import MainTabs from './MainTabs';

【讨论】：

【解决方案2】：

解决了这个问题。使用 ../ 进行导入，因为它们所在的文件夹并将 Tabs 更改为 Tab。

【讨论】：