点击通知跳转至JobDetail页后按返回键如何回到Notification标签页

解决方法 #

你可以根据业务需求选择以下三种实现方案：

方案1：自定义JobDetail页返回逻辑（改造成本最低） #

只需要在跳转和返回环节做少量修改即可实现需求：

• 点击通知跳转JobDetail时，在路由参数中携带来源标识：from: 'notification'
• 在JobDetail页拦截返回行为，判断来源为通知时直接跳转回Notification标签：

import { BackHandler, TouchableOpacity, Text } from 'react-native';
import { useFocusEffect, useNavigation } from '@react-navigation/native';

function JobDetail({ route }) {
  const navigation = useNavigation();
  const isFromNotification = route.params?.from === 'notification';

  // 拦截安卓物理返回键
  useFocusEffect(
    React.useCallback(() => {
      const handleBackPress = () => {
        if (isFromNotification) {
          navigation.navigate('Notification');
          return true; // 拦截默认返回逻辑
        }
        return false; // 正常走返回Job列表的逻辑
      };
      BackHandler.addEventListener('hardwareBackPress', handleBackPress);
      return () => BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
    }, [isFromNotification, navigation])
  );

  // 重写顶部导航栏返回按钮的点击逻辑
  React.useLayoutEffect(() => {
    if (isFromNotification) {
      navigation.setOptions({
        headerLeft: () => (
          <TouchableOpacity onPress={() => navigation.navigate('Notification')} style={{paddingLeft: 16}}>
            <Text>返回</Text>
          </TouchableOpacity>
        )
      });
    }
  }, [navigation, isFromNotification]);

  // 其余页面业务逻辑
}

方案2：调整导航结构（适合多入口跳职位详情的场景） #

如果你的应用存在多个入口都需要直接跳转到JobDetail，可以直接修改导航结构，一劳永逸解决问题：

• 原结构：根导航为底部标签导航，Jobs标签内部嵌套包含Job、JobDetail的栈导航
• 调整后结构：根导航为栈导航，第一层是底部标签导航（含Jobs、Notification两个标签），第二层是全局公共的JobDetail页面
• 调整后从通知点击跳转JobDetail时，直接在根栈执行push操作，返回时默认回到上一级也就是Notification标签，无需额外处理返回逻辑。

方案3：跳转时重置Jobs栈路由历史 #

不需要修改页面逻辑，只需调整通知点击的跳转逻辑，修改Jobs栈的路由历史即可：

// 通知点击时的跳转逻辑
navigation.reset({
  routes: [
    // 保留Notification标签的路由状态
    { name: 'Notification' },
    {
      name: 'Jobs',
      state: {
        routes: [
          // Jobs栈只保留JobDetail页面，返回时会直接退出Jobs标签回到Notification
          { name: 'JobDetail', params: { jobId: 你的职位ID参数 } }
        ]
      }
    }
  ]
});

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