React Navigation子导航容器无法跳转父容器并重置栈求助

问题根源 #

直接将LoginScreen作为Drawer导航的屏幕会导致导航上下文混乱：LoginScreen原本属于父级Stack导航容器，Drawer内再嵌套该组件会让它归属于Drawer的子栈，而非全局的父Stack，调用重置逻辑时会因路由上下文不匹配触发payload错误。

正确解决方案 #

1. 单独创建SignOut处理组件

不要直接复用LoginScreen，写一个专门的登出组件，在其中调用父Stack导航器的重置方法。

2. 适配不同React Navigation版本的重置逻辑

根据你使用的React Navigation版本，选择对应的代码：

React Navigation 5.x 写法

// DrawerNavigation.js
import React from 'react';
import { Button } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

// 专属登出组件
const SignOutScreen = ({ navigation }) => {
  const handleSignOut = () => {
    // 重置父Stack导航栈，直接跳转到LoginScreen并清空历史
    navigation.reset({
      index: 0,
      routes: [{ name: 'LoginScreen' }],
    });
  };

  return <Button title="Sign Out" onPress={handleSignOut} />;
};

// Drawer导航配置
export const Nav = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Inquiries" component={InquiriesScreen} />
      <Drawer.Screen name="SignOut" component={SignOutScreen} />
    </Drawer.Navigator>
  );
};

React Navigation 6.x 写法

v6版本对reset方法做了调整，需配合CommonActions：

// DrawerNavigation.js
import React from 'react';
import { Button } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { CommonActions, useNavigation } from '@react-navigation/native';

const Drawer = createDrawerNavigator();

// 专属登出组件
const SignOutScreen = () => {
  const navigation = useNavigation();

  const handleSignOut = () => {
    navigation.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [{ name: 'LoginScreen' }],
      })
    );
  };

  return <Button title="Sign Out" onPress={handleSignOut} />;
};

// Drawer导航配置
export const Nav = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Inquiries" component={InquiriesScreen} />
      <Drawer.Screen name="SignOut" component={SignOutScreen} />
    </Drawer.Navigator>
  );
};

关键检查点 #

• 确认父Stack导航（App.js中）已正确注册LoginScreen，路由名称拼写完全一致（大小写敏感）。
• 避免在Drawer导航中嵌套父Stack已存在的屏幕，防止导航上下文冲突。
• 若仍出现payload错误，检查reset方法的参数格式：index必须为0，routes数组中仅保留目标路由。

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