React Native使用Drawer导航时goBack()为何返回首页而非上一页面

你所有的页面都直接注册为了Drawer导航器的平级根路由，这是导致返回异常的核心原因：

• Drawer导航器的设计逻辑是所有注册的屏幕都属于同一层级的入口，默认不会维护跳转历史栈。当你调用navigation.navigate()切换不同的Drawer屏幕时，只会替换当前激活的Drawer页面，不会把上一个页面压入返回栈中。
• 你按ScreenOne→ScreenTwo→ScreenThree的路径跳转时，整个Drawer导航的返回栈里始终只有初始路由ScreenOne，因此在ScreenThree调用goBack()时会直接返回到初始页，不会经过ScreenTwo。

推荐的解决方案是给Drawer嵌套Stack导航，把需要层级跳转的页面放到Stack导航中管理，修改后的代码示例如下：

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';

function ScreenOne({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('ScreenTwo')}
        title="Go to screen two"
      />
    </View>
  );
}

function ScreenTwo({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.navigate('ScreenThree')} title="Go to screen three" />
    </View>
  );
}

function ScreenThree({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Try to go back to screen two.." />
    </View>
  );
}

// 新建Stack导航，把需要层级跳转的三个页面放到Stack里
const Stack = createNativeStackNavigator();
function MainStack() {
  return (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      <Stack.Screen name="ScreenOne" component={ScreenOne} />
      <Stack.Screen name="ScreenTwo" component={ScreenTwo} />
      <Stack.Screen name="ScreenThree" component={ScreenThree} />
    </Stack.Navigator>
  )
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="MainStack">
        {/* Drawer只注册Stack作为唯一的根页面 */}
        <Drawer.Screen name="MainStack" component={MainStack} options={{title: '首页'}} />
        {/* 其他Drawer入口可以继续在这里加 */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

如果确实需要三个页面都作为Drawer的独立入口，可以在跳转时手动记录前序页面，返回时调用navigation.navigate('ScreenTwo')主动跳转到目标页，但该方式不会维护完整的历史栈，仅适用于简单场景。

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