如何从嵌套TabNavigator的Perfil页面返回根StackNavigator的Portada？

根据你的导航层级结构（根StackNavigator包含Portada、MainScreen(TabNavigator)等，当前路径是Portada -> MainScreen -> Perfil），可以通过以下几种方式实现跳转：

方法1：直接导航到Portada路由 #

在Perfil页面的回调函数中（比如按钮点击事件），调用导航的navigate方法直接跳转到根栈中的Portada路由：

// 假设你在Perfil组件中已获取navigation对象
const handleGoBackToPortada = () => {
  navigation.navigate('Portada');
};

这种方式会直接回到Portada页面，并且保留原有的导航栈状态——如果之后从Portada再次进入MainScreen，会回到之前停留的Perfil页面。

方法2：重置导航栈（清除历史） #

如果你希望回到Portada后，用户无法通过返回按钮回到MainScreen，可以使用reset方法重置整个导航栈，只保留Portada页面：

const handleGoBackToPortada = () => {
  navigation.reset({
    index: 0,
    routes: [{ name: 'Portada' }],
  });
};

这种方式会清空之前的导航历史，确保Portada成为栈中的唯一页面，适合需要完全重置导航状态的场景。

方法3：通过根导航器返回 #

由于MainScreen是根StackNavigator的一个子页面，你可以获取根导航器的实例，然后执行pop操作回到上一个页面（也就是Portada）：

const handleGoBackToPortada = () => {
  const rootNavigator = navigation.getParent();
  if (rootNavigator) {
    rootNavigator.pop();
  }
};

这种方式更贴合“返回”的语义，相当于在根栈中后退一步，效果和直接导航到Portada类似，但不会额外添加新的路由记录。

注意事项 #

• 确保根StackNavigator的路由配置中，Portada的路由名称是'Portada'（和你调用navigate时的名称完全一致）。
• 以上方法适用于React Navigation 5.x及以上版本，不同版本的API可能略有差异，请根据你的实际版本调整。

内容的提问来源于stack exchange，提问作者Willy Rosa Huanca