React Navigation 6.x 按下后退按钮将带您回到初始屏幕答案

【问题标题】：React Navigation 6.x pressing back button takes you back to initial screenReact Navigation 6.x 按下后退按钮将带您回到初始屏幕
【发布时间】：2021-08-26 13:38:45
【问题描述】：

我刚刚从 React Native 5.x 迁移到 6.x，现在我的导航堆栈给我带来了问题。当我在抽屉导航器深处导航几个屏幕，然后按下 android 上的后退按钮（没有尝试过 IOS 是的）时，它会引导我回到我的第一个屏幕。我的导航堆栈如下

 <NavigationContainer theme={MyTheme}>
        <Drawer.Navigator
          initialRouteName="NewsFeed"
          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>
      </NavigationContainer>

我不确定问题出在哪里，也没有在任何地方找到任何答案。有人说将每个屏幕包装在它的堆栈导航器中，其他人说这是一个坏主意。

【问题讨论】：

标签： react-native react-navigation react-navigation-stack react-navigation-drawer

【解决方案1】：

我不确定这是否是您所要求的，但至于 React Navigation Upgrading from 5.x 帮助页面中列出的更改：

backBehavior 的默认值现在是选项卡的 firstRoute 和抽屉

然后：

要保留旧行为，您可以传递 backBehavior="history" 属性给导航员

因此您可以在代码中正确设置 backBehavior 属性，如下所示：

<NavigationContainer theme={MyTheme}>
    <Drawer.Navigator
        initialRouteName="NewsFeed"
        drawerContent={(props) => <SideNav {...props} />}
        screenOptions={{ headerShown: true, header: (options) => <TopNav options={options} /> }}
        backBehavior="history"  // <-- ADDED PROP
    >
    ...
</NavigationContainer>

【讨论】：