组合堆栈、抽屉和选项卡导航器

Question

我无法理解以下内容：

我想要一个带有两个标签的标签导航：Home 和 Map。 在Home 选项卡中，我想要一个Drawer Navigation。在Drawer Navigation 中，我希望能够导航到屏幕Profile 和About。当从Profile或About点击Back Button时，我想回到打开的Drawer Menu。

目前我有这个：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';

import DrawerContent from './DrawerContent';
import Mapp from './Mapp';
import Home from './Home';
import Profile from './Profile';
import About from './About';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

const HomeStackNavigator = () => {
    return <Stack.Navigator>
        <Stack.Screen
            name='Tab'
            component={TabNavigator} />
        <Stack.Screen
            name='Profile'
            component={Profile} />
        <Stack.Screen
            name='About'
            component={About} />
    </Stack.Navigator>
}

const TabNavigator = () => {
    return <Tab.Navigator>
        <Tab.Screen name='Home' component={Home} />
        <Tab.Screen name='Map' component={Mapp} />
    </Tab.Navigator>
}

const DrawerNavigator = () => {
    return <Drawer.Navigator
        drawerContent={props => DrawerContent(props)}>
        <Drawer.Screen name='Home' component={HomeStackNavigator} />
    </Drawer.Navigator>
}

const Navigation = () => {
    return <NavigationContainer>
        <DrawerNavigator />
    </NavigationContainer >
}

<DrawerContent /> 看起来像这样

import React from 'react';
import {
    DrawerContentScrollView,
    DrawerItemList,
    DrawerItem,
} from '@react-navigation/drawer';

const DrawerContent = props => {
    return <DrawerContentScrollView {...props}>
        <DrawerItemList {...props} />
        <DrawerItem label='Profile' onPress={() => props.navigation.navigate('Profile')} />
        <DrawerItem label='About' onPress={() => props.navigation.navigate('About')} />

    </DrawerContentScrollView>
}

export default DrawerContent;

这给了我

标签导航（为什么会有标题Tab的标题，我不要这个，但我必须在<HomeStackNavigator />中设置name prop）。

然后我可以打开Drawer（按预期工作）

当我点击个人资料时，我只能返回Tab。为什么不Drawer？

让我抓狂的是，我无法删除 Drawer 中的 Home 菜单项。

Answer 1

这种情况下抽屉打不开，您需要自己打开：

const HomeStackNavigator = () => {
    return <Stack.Navigator>
        <Stack.Screen
            name='Tab'
            component={TabNavigator} />
        <Stack.Screen
            name='Profile'
            component={Profile} 
            options={({ navigation }) => ({
               title: '',
              headerLeft: () => (
              <Button
                title="<"
                onPress={() => {
                  navigation.goBack();
                  navigation.openDrawer();
              }}
            />
          ),
        })}/>
        <Stack.Screen
            name='About'
            component={About} />
    </Stack.Navigator>
}

这是working Snack。