react-native - 当用户在 drawerContent、react-navigation v5 中通过设备或浏览器后退按钮返回时，上一个屏幕会与当前屏幕一起弹出

Question

我在 monorepo 架构中使用 react-navigation-v5 和 react-native-web。我的堆栈层次结构是这样的

-- drawer
  |-- splashScreen
  |-- authStack
  |-- appStack
        |-- categoryListScreen
        |-- searchScreen
        |-- profileScreen
        |-- aboutUsScreen

我的第一个问题是 web 中没有堆栈行为。我通过将 linking 对象传递给包含路由的 NavigationContainer 来修复它，heirachy 与上面完全相同。

const linking = {
    prefixes: [urlPrefixWeb(), urlPrefixNativeDeepLink()],
    config: {
      splash: {
        path: 'splash',
      },
      auth: {
        path: 'auth',
        screens: {
          login: 'login',
          register: 'register',
        },
      },
      app: {
        path: 'app',
        screens: {
          categoryList: 'categoryList',
          search: 'search',
          profile: 'profile',
          aboutUs: 'aboutUs',
        },
      },
    },
  };

现在，当我导航到 appStack 内的随机屏幕时，一切正常。 (例如:从 categoryListScreen 导航到 searchScreen 或 profileScreen 然后正常按预期逐步返回到 categoryListScreen );但是，当我尝试从 drawerContent 组件导航到 appStack 的屏幕并通过 browserBackPress 返回原始屏幕时，previous屏幕 也被弹出。例如

categoryScreen -> searchScreen -> profileScreen(点击 drawerContent 组件)。然后 backPress expected bahaviour 将转到 searchScreen 但 searchScreen 将被弹出并转到 categoryScreen。

简而言之，来自 drawerContent 组件的 props.navigation.navigate 函数无法正常工作，并且总是进行某种替换。

那么有人知道要提及的解决方法或相关问题吗？

Answer 1

我认为您的堆叠顺序不正确。您应该直接将路由插入抽屉。

例如:

  |-- splashScreen
  |-- authStack
  |-- appStack
    |-- drawer
        |-- categoryListScreen
        |-- searchScreen
        |-- profileScreen
        |-- aboutUsScreen