如何使用 BottomNavigator 中的菜单按钮实现抽屉的切换？

Question

//底部导航器

      <Tab.Screen
        name="Menu"
        component={DrawerNavigator}
        listeners={({navigation}) => ({
          tabPress: e => {
            e.preventDefault(); // Prevents the default behavior
            navigation.toggleDrawer(); // Open the drawer
          },
        })}
        options={{
          tabBarIcon: ({focused}) => {
            return (
              <View style={styles.tabBarItem}>
                <Image
                  source={require('../assets/icons/menu1.png')}
                  resizeMode="contain"
                  style={[
                    styles.icon,
                    focused ? styles.iconFocused : styles.iconInactive,
                  ]}
                />
                <Text
                  style={[
                    styles.label,
                    focused ? styles.labelFocused : styles.labelInactive,
                    {fontWeight: 'bold'},
                  ]}>
                  Menu
                </Text>
              </View>
            );
          },
        }}
      />

//抽屉导航器

<Drawer.Navigator
  screenOptions={{ headerShown: false }}
  initialRouteName="DrawerScreens"
>
  <Drawer.Screen
    name="DrawerScreens"
    component={DrawerScreens}
    options={{
      drawerLabel: "Home",
      drawerIcon: () => {
        return (
          <Image
            source={require("../assets/icons/home1.png")}
            resizeMode="contain"
            style={styles.icon}
          />
        );
      },
    }}
  />
</Drawer.Navigator>;

如何使用 BottomNavigator 中的菜单按钮实现抽屉的切换？当抽屉打开时，我想通过单击不同的选项卡来导航到它们，同时确保 BottomNavigator 保持可见。

我已经尝试过，但我不断收到此错误

错误 任何导航器均未处理带有有效负载 {"name":"DrawerNavigator"} 的“REPLACE”操作。

您有一个名为“DrawerNavigator”的屏幕吗？

Answer 1

看看这个教程，这应该会有帮助：

https://www.youtube.com/watch?v=l8nY4Alk70Q