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

Question

我很难实现以下几点：

我想要一个带有两个选项卡的选项卡导航：Home和Map。在Home选项卡中我想要一个Drawer Navigation. 在 中Drawer Navigation，我希望能够导航到屏幕Profile和About。当单击Back ButtonfromProfile或 时About，我想返回到 open 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;

这给了我

选项卡导航（为什么有一个带有 title 的标题Tab，我不想要这个，但我必须name prop在 中设置<HomeStackNavigator />）。

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

当我单击 ie Profile 时，我只能返回到Tab. 为什么不呢Drawer？

同样让我抓狂的是，我无法Home删除Drawer.

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>
}

这是一个正在运行的小吃。