React Navigation：从子页面跳转到父级兄弟页面的实现方法

针对你的导航结构（Main Stack包含LoginPage、Desk（Drawer）、MyAccount，Desk下有Messages页面），从Messages跳转到MyAccount可以通过以下两种常用方式实现：

方法1：通过getParent()获取父级Stack导航 #

由于Desk是Main Stack的一个子屏幕，你可以在Messages页面中获取到Main Stack的导航实例，直接调用跳转方法：

// 在Messages组件内部
const handleGoToMyAccount = () => {
  const mainStackNav = navigation.getParent();
  if (mainStackNav) {
    mainStackNav.navigate('MyAccount');
  }
};

这里的navigation是通过useNavigation()钩子获取的（函数组件），或者类组件中的this.props.navigation。

方法2：直接使用绝对路径跳转 #

React Navigation支持通过指定根导航名称+目标屏幕的方式进行跨层级跳转：

const handleGoToMyAccount = () => {
  navigation.navigate('Main', { screen: 'MyAccount' });
};

注意：'Main'是你根Stack导航的名称，需要和你创建Stack时的name参数一致；'MyAccount'是目标屏幕在Main Stack中的注册名称。

可选：重置导航栈（避免返回上一页） #

如果希望跳转到MyAccount后，用户点击返回按钮不会回到之前的页面，可以使用reset操作重置导航栈：

import { CommonActions } from '@react-navigation/native';

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

关键注意事项 #

• 确保所有导航和屏幕的name参数与你的实际配置完全匹配，否则会出现跳转失败的情况。
• 如果使用的是React Navigation v5/v6，以上方法均适用（v6中getParent()的用法一致）。

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