React Native Navigation跨导航器返回2个页面的实现问题咨询

你用StackActions.pop(2)不生效的核心原因是：pop方法仅作用于当前所在的栈导航器，如果你的导航是嵌套结构（比如Stack嵌套Tab、或者多层Stack嵌套），该方法无法操作其他导航器的路由栈，自然无法达到跨栈返回的效果。

下面是两种可直接落地的实现方案：

方案1：跳转到指定历史路由页 #

官方支持直接通过路由key定位到历史访问过的任意页面，不管该页面属于哪个导航器：

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

// 页面内调用
const navigation = useNavigation();
navigation.navigate({
  key: '目标页面的路由key', // 路由key可通过对应页面的route.key属性获取
});

如果目标路由是固定名称，你也可以用reset方法直接重置路由栈到目标页面：

navigation.reset({
  routes: [
    // 按顺序保留你需要的历史路由，最后一个为当前展示页面
    { name: 'Screen A' },
    { name: '你要返回的目标页面路由名' }
  ]
});

方案2：直接回溯到指定页面 #

如果需求是和返回操作一致的回溯历史栈行为，可直接给goBack方法传入目标页面的key：

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

navigation.dispatch(
  CommonActions.goBack({
    key: '目标页面的路由key'
  })
);

该方法会遍历整个导航历史栈，直到找到对应key的页面后停止，完全满足跨导航器返回指定中间页面的需求。

注意事项 #

• 所有页面的路由key都可以通过对应页面的route.key属性拿到，你可以在进入对应页面时将需要的key存储到全局状态中备用
• 上述方法均需要使用全局导航对象，可通过useNavigation钩子或者导航容器的ref获取，不要用嵌套子导航器的内部对象调用

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