React Native中如何从Tab子屏导航到父级Stack的兄弟屏幕？

我明白你遇到的问题了——嵌套在tankScreen里的InnerTab中的Map和List页面，没办法直接用this.props.navigation.navigate('filterScreen')跳转到顶层Stack里的filterScreen对吧？这是因为当前页面的navigation对象属于内层的TabNavigator，它的上下文里没有顶层Stack的路由信息。

给你几个可行的解决办法：

方法1：使用dangerouslyGetParent()获取顶层导航对象 #

在Map或List组件里，你可以通过获取父级导航器的navigation对象来实现跳转，代码如下：

// 在Map/List组件的导航触发函数里
handleGoToFilter = () => {
  const topLevelNavigation = this.props.navigation.dangerouslyGetParent();
  topLevelNavigation.navigate('filterScreen');
}

这个方法能直接拿到tankScreen所在的顶层StackNavigator的导航对象，这样就能正确跳转到filterScreen了。虽然方法名带"dangerously"，但在你的导航结构下是安全的，只要后续不大幅调整导航层级就没问题。

方法2：从父组件传递顶层导航对象 #

你可以在tankScreen渲染InnerTab的时候，把顶层的navigation传递进去：

// 在TankScreen组件的render方法里
render() {
  return (
    <InnerTab navigation={this.props.navigation} />
  );
}

然后在Map/List组件里，直接用接收到的这个导航对象跳转：

handleGoToFilter = () => {
  this.props.navigation.navigate('filterScreen');
}

这种方式更直观，也避免了使用带"dangerously"的API，推荐优先尝试。

方法3：使用跨栈导航语法（适用于react-navigation 3.x及以上） #

如果你的react-navigation版本是3.x或更高，可以直接通过指定目标栈的方式跳转：

handleGoToFilter = () => {
  this.props.navigation.navigate('filterScreen', {}, {
    target: 'Tank' // 这里的'Tank'是你顶层StackNavigator的名称
  });
}

这个方法会直接告诉导航器要跳转到名为'Tank'的栈里的'filterScreen'路由。

为什么原来的写法无效？ #

简单来说，每个导航器都会创建自己的navigation上下文，Map和List页面的navigation属于InnerTab这个TabNavigator，它只知道自己内部的路由（Map和List），不知道顶层Stack里的filterScreen，所以必须获取到顶层导航器的上下文才能完成跳转。

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