React Navigation报错找不到navigation对象，求解决登录页跳转问题

问题原因 #

你的NavigationContainer下同时直接渲染了Stack.Navigator和Tab.Navigator两个同级导航器，这违反了React Navigation的核心规则——根容器下只能有一个导航器作为根节点。多个同级导航器会导致导航上下文冲突，使得LoginScreen无法正确获取到navigation对象。

解决方案 #

将Tab导航嵌套到Stack导航中，把Tab导航作为Stack的一个屏幕，让Stack导航成为唯一的根导航器。调整后的导航结构如下：

修改后的App.js代码 #

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// 请确保已导入所有所需组件：LoginScreen、RegisterScreen、Home、Calendrier、MaterialCommunityIcons等

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

// 单独定义Tab导航组件
function TabNavigator() {
  return (
    <Tab.Navigator
      activeColor="black"
      inactiveColor="gray"
      initialRouteName="Home"
    >
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: "",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={33} />
          ),
        }}
      />
      <Tab.Screen
        name="Calendrier"
        component={Calendrier}
        options={{
          tabBarLabel: "",
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons
              name="calendar-month-outline"
              color={color}
              size={30}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <StatusBar hidden />
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Register" component={RegisterScreen} />
        {/* 将Tab导航作为Stack的一个子屏幕 */}
        <Stack.Screen 
          name="MainTabs" 
          component={TabNavigator} 
          options={{ headerShown: false }} // 可选：隐藏Tab导航的顶部标题栏
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

调整后的LoginScreen代码（两种方式均可） #

方式1：使用useNavigation钩子

import { useNavigation } from '@react-navigation/native';
import { View, Button } from 'react-native';

export default function LoginScreen() {
  const navigation = useNavigation();
  return (
    <View style={{flex:1, backgroundColor:'mistyrose'}}>
      <View style={{justifyContent:'flex-start', alignItems:"flex-end"}}>
        <Button 
          color='mistyrose' 
          onPress={() => navigation.navigate("Register")} 
          title='跳转注册'
        />
      </View>
      <ConnectButton/>
    </View>
  );
}

方式2：通过props接收navigation

import { View, Button } from 'react-native';

export default function LoginScreen({ navigation }) {
  return (
    <View style={{flex:1, backgroundColor:'mistyrose'}}>
      <View style={{justifyContent:'flex-start', alignItems:"flex-end"}}>
        <Button 
          color='mistyrose' 
          onPress={() => navigation.navigate("Register")} 
          title='跳转注册'
        />
      </View>
      <ConnectButton/>
    </View>
  );
}

调整结构后，LoginScreen处于正常的Stack导航上下文内，即可正确获取navigation对象完成跳转。若登录完成后需要进入Tab导航，只需调用navigation.navigate("MainTabs")即可。

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