React Navigation 6.x 抽屉导航点击安卓返回键直接返回初始屏问题求助

问题根因 #

• React Navigation 6.x 调整了抽屉导航的默认路由回退行为：所有直接挂载在Drawer.Navigator下的屏幕属于平级路由，默认backBehavior为initialRoute，跳转时不会生成层级栈记录，仅维护当前激活的抽屉路由项，因此安卓返回键触发时会直接退出到抽屉的初始路由，而非返回上一次访问的页面，这是5.x到6.x的破坏性更新，不属于代码bug。

解决方案 #

方案1：抽屉路由嵌套栈导航（官方推荐，长期稳定） #

不要直接把业务页面全部挂载到抽屉导航下，按业务模块为每个抽屉入口配置独立的栈导航，同模块的深层页面都放在对应栈下管理：

// 定义资讯流业务模块的栈导航
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const NewsFeedStack = createNativeStackNavigator();
function NewsFeedStackScreen() {
  return (
    <NewsFeedStack.Navigator screenOptions={{ headerShown: false }}>
      <NewsFeedStack.Screen name="NewsFeed" component={NewsFeedScreen} />
      {/* 资讯流模块下的所有深层页都放在这个栈里 */}
      <NewsFeedStack.Screen name="Post" component={PostScreen} />
      <NewsFeedStack.Screen name="User" component={UserScreen} />
    </NewsFeedStack.Navigator>
  )
}

// 定义用户列表业务模块的栈导航
const UsersStack = createNativeStackNavigator();
function UsersStackScreen() {
  return (
    <UsersStack.Navigator screenOptions={{ headerShown: false }}>
      <UsersStack.Screen name="Users" component={UsersScreen} />
      <UsersStack.Screen name="User" component={UserScreen} />
    </UsersStack.Navigator>
  )
}

// 改造后的抽屉导航，仅挂载各个业务栈的入口
<NavigationContainer theme={MyTheme}>
  <Drawer.Navigator
    initialRouteName="NewsFeed"
    drawerContent={(props) => <SideNav {...props} />}
    screenOptions={{ headerShown: true, header: (options) => <TopNav options={options} /> }}
  >
    <Drawer.Screen name="NewsFeed" component={NewsFeedStackScreen} />
    <Drawer.Screen name="Users" component={UsersStackScreen} />
  </Drawer.Navigator>
</NavigationContainer>

该方案优势是每个业务模块的路由历史独立维护，跳转时栈记录由对应栈导航管理，安卓返回键会严格按访问顺序回退，切换抽屉入口时也不会丢失各自模块的访问栈。之前提到的「给每个页面单独包裹Stack navigator」是对该架构的错误理解，正确逻辑是按模块划分栈，不会产生额外性能开销。

方案2：临时适配（适合小型项目快速修复） #

如果当前项目页面量级小，暂时不想重构路由结构，可直接修改抽屉导航的backBehavior属性，同时跳转时统一用navigation.push替代navigation.navigate：

<Drawer.Navigator
  initialRouteName="NewsFeed"
  backBehavior="history" // 新增该行，按访问历史处理返回逻辑
  drawerContent={(props) => <SideNav {...props} />}
  screenOptions={{ headerShown: true, header: (options) => <TopNav options={options} /> }}
>
  {/* 原有屏幕配置保持不变 */}
  <Drawer.Screen name="NewsFeed" component={NewsFeedScreen} />
  <Drawer.Screen name="Post" component={PostScreen} />
  <Drawer.Screen name="Users" component={UsersScreen} />
  <Drawer.Screen name="User" component={UserScreen} />
</Drawer.Navigator>

该方案局限是切换抽屉入口时会丢失之前的访问历史，仅适合临时过渡使用。

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