React Navigation子页面跳转父导航栈页面的实现问询

核心结论 #

完全可以实现从子Drawer导航跳转回父Stack导航的指定页面，也能从父Stack直接跳转到子Drawer的具体页面，下面结合你的实际场景给出具体实现步骤。

导航结构定义 #

先明确嵌套导航的层级，父Stack包含登录流程页面，子Drawer作为Stack的一个子页面存在：

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
// 导入你的页面组件
import Login from './screens/Login';
import Register from './screens/Register';
import OTP from './screens/OTP';
import DrawerPage1 from './screens/DrawerPage1';
import DrawerPage2 from './screens/DrawerPage2';
import Logout from './screens/Logout';

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();

// 定义子Drawer导航
function AppDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="DrawerPage1" component={DrawerPage1} />
      <Drawer.Screen name="DrawerPage2" component={DrawerPage2} />
      <Drawer.Screen name="Logout" component={Logout} />
    </Drawer.Navigator>
  );
}

// 定义父Stack导航
export default function RootNavigator() {
  return (
    <Stack.Navigator initialRouteName="Login">
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Register" component={Register} />
      <Stack.Screen name="OTP" component={OTP} />
      {/* 将Drawer导航作为Stack的一个页面，隐藏默认头部避免重复 */}
      <Stack.Screen name="AppDrawer" component={AppDrawer} options={{ headerShown: false }} />
    </Stack.Navigator>
  );
}

场景1：从子Drawer的Logout跳回父Stack的Login #

退出登录后通常需要清空导航栈，避免用户返回之前的页面，推荐使用navigation.reset方法：

// Logout页面组件
import { useNavigation } from '@react-navigation/native';
import { Button, View } from 'react-native';

export default function Logout() {
  const navigation = useNavigation();

  const handleLogout = () => {
    // 重置导航栈，只保留Login页面
    navigation.reset({
      index: 0,
      routes: [{ name: 'Login' }],
    });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="确认退出登录" onPress={handleLogout} />
    </View>
  );
}

如果只是单纯跳转（允许返回），也可以直接用：

navigation.navigate('Login');

场景2：从父Stack页面跳转到子Drawer的指定页面 #

比如从父Stack的screen2跳转到子Drawer的DrawerPage1，需要先指定父Stack中Drawer导航对应的screen名称，再传子页面参数：

// 在父Stack的screen2组件中
import { useNavigation } from '@react-navigation/native';
import { Button } from 'react-native';

export default function Screen2() {
  const navigation = useNavigation();

  const goToDrawerPage1 = () => {
    // 先跳转到Drawer导航容器，再指定内部的具体页面
    navigation.navigate('AppDrawer', { screen: 'DrawerPage1' });
  };

  return <Button title="跳转到Drawer页面1" onPress={goToDrawerPage1} />;
}

场景3：从子Drawer页面跳转回父Stack的指定页面 #

比如从DrawerPage1跳回父Stack的screen2，直接调用navigation.navigate指定父页面名称即可：

// DrawerPage1组件中
const goBackToScreen2 = () => {
  navigation.navigate('screen2'); // 注意这里要和父Stack中screen2定义的name一致
};

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