react-native - 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> 

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

Answer 1

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

The default value for backBehavior is now firstRoute for tabs anddrawer

然后:

To preserve old behavior, you can pass backBehavior="history" propto the navigators

因此您可以在代码中正确设置 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>