Android端React Navigation栈导航返回逻辑异常问题求助

首页存在两个跳转至Screen A与Screen B的链接，当前导航逻辑出现异常：

• 用户从Home页面导航至Screen A，通过应用内返回按钮回到Home页面
• 再次从Home页面导航至Screen B后，按下手机物理返回键会先跳转至Screen A，再次按下返回键才回到Home页面
• 期望逻辑：从Screen B按下物理返回键直接回到Home页面

相关导航代码如下：

<NavigationContainer>
  <Drawer.Navigator
    initialRouteName="Home"
    drawerContent={(props) => (
      <CustomDrawerContent drawerItems={drawerItemsMain} {...props} />
    )}
  >
    {drawerItemsMain.map((item) =>
      item.routes.map((route) => (
        <Drawer.Screen
          key={route.routeName}
          name={route.routeName}
          component={route.component}
        />
      ))
    )}
    <Drawer.Screen name="StackScreens" component={StackScreensNavigator} />
  </Drawer.Navigator>
</NavigationContainer>;

const StackScreensNavigator = createStackNavigator();
const Drawer = createDrawerNavigator();

function StackScreensNavigator() {
  return (
    <StackScreensNavigator.Navigator screenOptions={{ headerShown: false }}>
      <StackScreensNavigator.Screen name="ScreenA" component={ScreenA} />
      <StackScreensNavigator.Screen name="ScreenB" component={ScreenB} />
    </StackScreensNavigator.Navigator>
  );
}

Screen A与Screen B被封装在同一个Stack导航器（StackScreens）中，该Stack作为Drawer的一个子页面存在：

1. 当从Home跳转到Screen A时，Stack内部的路由栈会添加Screen A的记录
2. 从Screen A返回Home时，只是退出了Stack导航器回到Drawer的Home页面，但Stack内部的路由栈并未清空
3. 后续跳转到Screen B时，Stack的路由栈变为[Screen A, Screen B]，物理返回键会按栈顺序依次弹出页面，因此先回到Screen A，再回到Home

方案1：将Screen A与Screen B设为独立的Drawer页面（推荐） #

如果Screen A与Screen B之间没有互相导航的需求，直接将它们作为Drawer的子页面，而非嵌套在同一个Stack中，这样每个页面的返回逻辑都会直接指向Home：

<NavigationContainer>
  <Drawer.Navigator
    initialRouteName="Home"
    drawerContent={(props) => (
      <CustomDrawerContent drawerItems={drawerItemsMain} {...props} />
    )}
  >
    {drawerItemsMain.map((item) =>
      item.routes.map((route) => (
        <Drawer.Screen
          key={route.routeName}
          name={route.routeName}
          component={route.component}
        />
      ))
    )}
    {/* 移除原StackScreens，直接添加ScreenA和ScreenB作为Drawer子页面 */}
    <Drawer.Screen name="ScreenA" component={ScreenA} />
    <Drawer.Screen name="ScreenB" component={ScreenB} />
  </Drawer.Navigator>
</NavigationContainer>

方案2：跳转Screen B时重置Stack内部路由栈 #

如果必须保留Stack导航器的结构，在Home页面跳转至Screen B时，重置Stack的路由栈，只保留Screen B的记录：

// Home页面中跳转Screen B的代码
navigation.navigate('StackScreens', {
  screen: 'ScreenB',
  state: {
    routes: [{ name: 'ScreenB' }], // 重置栈，仅保留ScreenB
  },
});

方案3：在Screen B中监听物理返回键 #

通过监听Android的物理返回事件，强制返回到Home页面：

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

function ScreenB() {
  const navigation = useNavigation();

  useFocusEffect(
    React.useCallback(() => {
      const handleBackPress = () => {
        navigation.navigate('Home');
        return true; // 拦截默认返回行为
      };

      BackHandler.addEventListener('hardwareBackPress', handleBackPress);

      return () => {
        BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
      };
    }, [navigation])
  );

  return (
    // ScreenB的页面内容
  );
}

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