React Navigation报错：无法注册导航器，多种方案尝试无效

错误详情 #

• 设备端错误截图：
  

• 终端报错信息：

ERROR  Warning: Error: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?
该错误也可能因安装多份@react-navigation包导致，错误位置如下：
in StackNavigator (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in TripTracker(RootComponent), js engine: hermes

已尝试的无效解决方案 #

• 清理node_modules和package-lock.json后重新安装依赖
• 检查并确保@react-navigation/native未重复安装
• 确认所有依赖版本兼容性
• 执行npm dedupe处理重复依赖
• 重新安装指定版本的@react-navigation/native

依赖检查结果 #

执行npm ls @react-navigation/native的输出：

@react-navigation/elements@1.3.31
│ │ └── @react-navigation/native@6.1.18 deduped
│ └── @react-navigation/native@6.1.18 deduped
├─┬ @react-navigation/drawer@6.7.2
│ └── @react-navigation/native@6.1.18 deduped
├── @react-navigation/native@6.1.18
└─┬ @react-navigation/stack@6.4.1
└── @react-navigation/native@6.1.18 deduped

App.js代码 #

import 'react-native-gesture-handler';
import React, { useState, useEffect } from 'react';
import {
  Button,
  View,
  Switch,
  ScrollView,
  Text,
  TouchableOpacity,
  Image,
} from 'react-native';

import AboutScreen from './components/screens/AboutScreen';
import Stack2Screen from './components/Stack2Screen';
import Stack3Screen from './components/screens/Stack3Screen';
import DrawerFirstScreen from './components/screens/DrawerFirstScreen';

import { NavigationContainer } from '@react-navigation/native';
import {
  createDrawerNavigator, DrawerContentScrollView,
  DrawerItemList,
  DrawerItem
} from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

import { GoogleSignin } from '@react-native-google-signin/google-signin';
GoogleSignin.configure({
  webClientId: '--',
});

import auth from '@react-native-firebase/auth';

export default function App() {

  function DrawerSecondScreen() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}></View>
    );
  }

  function Stack1Screen() {
    return (
      <Drawer.Navigator
        screenOptions={{
          drawerStyle: {
            backgroundColor: isEnabled ? 'orange' : 'white',
          },
        }}
        initialRouteName="DrawerFirst" drawerContent={props => {
          return (
            <DrawerContentScrollView {...props}>
              <DrawerItemList {...props} />
              <DrawerItem label="Logout" onPress={() => props.navigation.navigate("SignIn")} />
            </DrawerContentScrollView>
          )
        }}>
        <Drawer.Screen
          name="DrawerFirst"
          component={DrawerFirstScreen}
          options={{
            headerTintColor: isEnabled ? 'white' : 'black',
            headerStyle: {
              backgroundColor: isEnabled ? 'black' : 'white',
            },
            headerRight: () => (
              <Switch
                trackColor={{ false: '#767577', true: '#81b0ff' }}
                thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
                onValueChange={toggleSwitch}
                value={isEnabled}
              />
            ),
          }}
        />
        <Drawer.Screen name="About" component={DrawerSecondScreen} />
      </Drawer.Navigator>

    );
  }

  function HomeScreen() {
    return (
    <Stack.Navigator>
      <Stack.Screen name="Stack1" component={Stack1Screen} />
      <Stack.Screen name="Recharge" component={Stack2Screen} />
      <Stack.Screen name="Stack3" component={Stack3Screen} />

    </Stack.Navigator>)
  }

  function SettingScreen() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
        }}></View>
    );
  }

  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  // Set an initializing state whilst Firebase connects
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState();

  // Handle user state changes
  function onAuthStateChanged(user) {
    setUser(user);
    if (initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

  if (initializing) return null;

  function SignInScreen() {
    return (
      <View>
        <Text>SignInScreen</Text>
        <View>
          <Button
            title="Google Sign-In"
            onPress={() => onGoogleButtonPress().then(() => console.log('Signed in with Google!'))}
          />
        </View>
      </View>
    )
  }
  function SignUpScreen() {
    return (
      <View>
        <Text>SignUpScreen</Text>
      </View>
    )
  }
  function TabHelperScreen() {
    return (
      <Tab.Navigator screenOptions={{ headerShown: false }}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="About" component={AboutScreen} />
      </Tab.Navigator>
    )
  }
  const authStack = createStackNavigator();

  if (!user) {
    return (
      <authStack.Navigator>
        <authStack.Screen name="SignUp" component={SignUpScreen} />
        <authStack.Screen name="SignIn" component={SignInScreen} />
      </authStack.Navigator>
    );
  }

  const rootStack = createStackNavigator();
  return (
    <NavigationContainer>
      <rootStack.Navigator>
        <rootStack.Screen name="TabHelper" component={TabHelperScreen} />
        <rootStack.Screen name="SignUp" component={SignUpScreen} />
        <rootStack.Screen name="SignIn" component={SignInScreen} />
      </rootStack.Navigator>
    </NavigationContainer>
  );
}

请求解决办法 #

上述所有尝试均未解决错误，希望能得到有效的修复方案。

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