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

【问题标题】：How to implement drawer navigator in each tab?如何在每个选项卡中实现抽屉导航器？
【发布时间】：2021-02-22 10:19:34
【问题描述】：

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

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

HomeBottomTab.js

在这里，我创建了一个底部选项卡导航器并为每个选项卡调用了抽屉。

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

在这里，我为 Notifications 选项卡创建了一个 Drawer Navigator。

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

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

【问题讨论】：

标签： react-native react-navigation react-navigation-v5 react-navigation-drawer react-navigation-bottom-tab

【解决方案1】：

我所要做的就是在其中创建一个独立的导航容器和一个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>
    );
}

【讨论】：