React Native抽屉导航中goBack()无法返回上一页面问题

问题根源 #

你当前把所有页面都塞进同一个Drawer Navigator中，抽屉的栈逻辑会导致从任意页面调用goBack()时，默认回到Drawer初始化时的首个页面（这里是Account），而非实际跳转前的页面。同时用drawerItemStyle: {height:0}隐藏主页面的方式不够优雅，还混淆了导航层级。

解决方案 #

重构导航结构，将主内容页面（Screen A/B）放在独立的Stack Navigator中，Drawer Navigator仅保留全局设置类页面（Account、Settings），并把这个主Stack作为Drawer的默认页面。这样：

• 主页面的导航（A→B→A）完全独立，不受Drawer影响
• 从主页面打开抽屉进入Account/Settings后，goBack()会正确回到之前的主页面
• 可以通过自定义抽屉内容，彻底隐藏主Stack的入口，只显示全局功能

修改后的完整代码 #

import React from 'react';
import { Text, View, Button, Alert, TextInput } from 'react-native';
import { NavigationContainer, DrawerToggleButton } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import {
    DrawerItemList,
    DrawerContentScrollView,
} from '@react-navigation/drawer';

import { SignInScreen } from './ui/signinscreen.js';
import { AccountScreen } from './ui/accountscreen.js';
import { SettingsScreen } from './ui/settingsscreen.js';
import { AScreen } from './ui/ascreen.js';
import { BScreen } from './ui/bscreen.js';

// 主内容栈：单独处理Screen A和Screen B的导航逻辑
const MainStack = createStackNavigator();
const MainStackNavigator = ({ initialScreen }) => {
  return (
    <MainStack.Navigator initialRouteName={initialScreen}>
      <MainStack.Screen 
        name="Screen A" 
        component={AScreen}
        options={({ navigation }) => ({
          headerRight: () => <DrawerToggleButton />,
        })}
      />
      <MainStack.Screen 
        name="Screen B" 
        component={BScreen}
        options={({ navigation }) => ({
          headerLeft: () => <Button title="< Back" onPress={() => navigation.goBack()} />,
          headerRight: () => <DrawerToggleButton />,
        })}
      />
    </MainStack.Navigator>
  );
};

// 抽屉导航：仅包含全局设置页面和主内容栈入口
const Drawer = createDrawerNavigator();
const HomeDrawer = ({ initialScreen }) => {
  return (
    <Drawer.Navigator
      screenOptions={{
        headerShown: true,
        headerLeft: () => <Button title="< Back" onPress={() => navigation.goBack()} />,
      }}
      // 自定义抽屉内容，仅显示全局功能入口
      drawerContent={(props) => (
        <DrawerContentScrollView {...props}>
          <DrawerItemList {...props} />
        </DrawerContentScrollView>
      )}
      initialRouteName="Main"
    >
      {/* 主内容栈：彻底隐藏抽屉入口 */}
      <Drawer.Screen 
        name="Main" 
        children={() => <MainStackNavigator initialScreen={initialScreen} />}
        options={{ drawerItemStyle: { display: 'none' } }}
      />
      {/* 全局设置页面 */}
      <Drawer.Screen name="Account" component={AccountScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
};

const RootStack = createStackNavigator();

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
  // 根据登录逻辑动态设置初始页面，示例默认Screen A
  const initialMainScreen = "Screen A"; 

  const handleSignIn = () => {
    setIsAuthenticated(true);
  };

  return (
    <NavigationContainer>
      <RootStack.Navigator initialRouteName="Sign In">
        {isAuthenticated ? (
          <RootStack.Group screenOptions={{ headerShown: false }}>
            <RootStack.Screen name="Home">
              {(props) => <HomeDrawer {...props} initialScreen={initialMainScreen} />}
            </RootStack.Screen>
          </RootStack.Group>
        ) : (
          <RootStack.Group screenOptions={{ headerShown: true }}>
            <RootStack.Screen name="Sign In" options={{ title: "Nav Test" }}>
              {(props) => <SignInScreen {...props} onSignIn={handleSignIn} />}
            </RootStack.Screen>
          </RootStack.Group>
        )}
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

export default App;

关键改动说明 #

1. 拆分导航层级：主内容（A/B）独立为MainStack，Drawer仅负责全局页面，两者通过Drawer默认页面关联，避免栈逻辑混乱
2. 优雅隐藏主页面入口：用drawerItemStyle: { display: 'none' }彻底隐藏主Stack的抽屉入口，比设置height:0更可靠
3. 动态初始页面：通过initialMainScreen参数传递登录后的初始页面，灵活控制进入Screen A或B
4. 修复goBack行为：抽屉页面的goBack()会正确回到之前的主内容页面，主页面之间的导航也恢复正常
5. 统一抽屉按钮：所有主页面右上角保留抽屉按钮，确保全局可访问侧边菜单

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