如何在每个选项卡中实现抽屉导航器？

Question

我想在每个选项卡中都有抽屉式导航，并且我遵循了这种方法，但是当我切换回上一个选项卡时它不起作用（可能是某些导航树问题）。

正如您在上面看到的，抽屉第一次在每个选项卡中工作正常，但是当我返回到任何已导航的选项卡并尝试打开抽屉时，抽屉不会为该选项卡打开但是打开上一个选项卡。我认为存在一些导航问题。

HomeBottomTab.js

在这里，我创建了一个 Bottom Tab Navigator 并为每个选项卡调用了抽屉。

const HomeBottomTab = ({ navigation }) => {
  return (
    <Tab.Navigator ... >
      <Tab.Screen name="Notifications" component={NotificationsDrawer} ... />
      <Tab.Screen name="Tutorials" component={TutorialsDrawer} ... />
      <Tab.Screen name="Wallet" component={WalletDrawer} ... />
    </Tab.Navigator>
  )
}

NotificationsDrawer.js

我在这里为“通知”选项卡创建了一个抽屉导航器。

export default function NotificationsDrawer({ navigation }) {
    return (
      <Drawer.Navigator ... >
        <Drawer.Screen ... />
        <Drawer.Screen ... />
        <Drawer.Screen ... />
      </Drawer.Navigator>
    )
}

我对 TutorialsDrawer 和 WalletDrawer 做了同样的事情。有没有什么办法解决这一问题？我是不是做错了什么？

Answer 1

我所要做的就是在其中创建一个独立的 Navigation Container 和一个 Stack Navigator，其中包含一个 Stack Screen 并且它接受抽屉作为组件。

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function Notifications_Drawer({ navigation }) {
 return (
  <Drawer.Navigator ... >
      <Drawer.Screen ... />
      <Drawer.Screen ... />
      <Drawer.Screen ... />
  </Drawer.Navigator>
 )
}

export default function NotificationsDrawer() {
    return (
        <NavigationContainer independent={true}>
            <Stack.Navigator>
                <Stack.Screen
                    name="Notifications_Drawer"
                    component={Notifications_Drawer}
                    options={{ headerShown: false }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}