React Navigation 6.x 按后退按钮将带您返回初始屏幕

Question

我刚刚从 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> 

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

Answer 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>