如何在反应导航 v5 中将抽屉放在标题上？

Question

这是我的代码

export const DrawerStack = () => {
  return (
<Drawer.Navigator
      drawerStyle={{backgroundColor: BLUE_COLOR_1}}
      drawerContentOptions={{labelStyle: {color: '#FFF'}}}>
      <Drawer.Screen
        name={HOME_SCREEN}
        component={HomeTopTabNavigator}

      />
      <Drawer.Screen
        name={WALLET}
        component={Wallet}
        options={{title: 'Wallet'}}
      />...

然后我在堆栈屏幕中引用它，我将其包装在堆栈导航器中

<Stack.Navigator><Stack.Screen
        name={HOME_STACK_SCREEN}
        component={DrawerStack}

我尝试关注How to get drawer over the header in react navigation?，但这些很快将无法在 v5 中使用，因为导航器无法将另一个导航器作为直接子级

Answer 1

你需要把你的堆栈放在抽屉里，而不是把抽屉放在堆栈里

- Drawer
  - Stack
    - Home
    - Wallet

https://reactnavigation.org/docs/en/nesting-navigators.html#parent-navigators-ui-is-rendered-on-top-of-child-navigator

v5 作为导航器不能有另一个导航器作为直接子级

你不需要直接的孩子。将堆栈放在屏幕内。