React Navigation组合Stack、Drawer、Tab导航器的实现与问题排查

问题1：消除Tab导航上方多余的Tab标题头 #

• 根因：Stack.Navigator默认开启Header显示，即使容器内嵌套Tab组件，也会按照Screen配置渲染对应标题栏。name是Screen的必填路由标识属性，无需删除，通过配置即可隐藏多余头部。
• 改法：对嵌套Tab的Stack.Screen配置options={{ headerShown: false }}，关闭该页面的Header渲染即可，完全不影响name属性的路由识别功能。

问题2：移除Drawer默认生成的Home菜单项 #

• 根因：自定义DrawerContent组件时引入了<DrawerItemList {...props} />，该组件会自动遍历Drawer.Navigator下注册的所有Screen并渲染为菜单入口，默认注册的Home Screen自然会显示在列表中。
• 改法：删除DrawerContent组件内的DrawerItemList渲染逻辑，仅保留自定义的Profile、About菜单项，即可消除默认生成的Home入口。

问题3：修正返回逻辑，从Profile/About返回时回到打开状态的Drawer菜单 #

• 根因：原实现的导航层级匹配错误，从Drawer跳转Profile/About时没有绑定返回动作和Drawer的打开状态，默认的Stack返回逻辑只会回退到上一级Tab页面，不会触发Drawer展开。
• 改法：
  1. 调整导航层级，将Profile、About设置为Home所属Stack下的同级路由，而非Drawer的子路由
  2. 自定义Profile、About页面的返回按钮逻辑，点击返回时先回退到Drawer主页面，再主动调用openDrawer()展开侧边菜单

导航根组件代码 #

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 { TouchableOpacity, Text } from 'react-native';

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();

// Home Tab内嵌的Drawer导航，主屏幕为原Home页面
const HomeDrawer = () => {
  return (
    <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
      <Drawer.Screen name="HomeMain" component={Home} options={{ headerShown: false }} />
    </Drawer.Navigator>
  )
}

// Home Tab所属的Stack，承载Drawer、Profile、About页面
const HomeStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="HomeDrawer"
        component={HomeDrawer}
        options={{ headerShown: false }}
      />
      {/* 自定义Profile页面返回逻辑 */}
      <Stack.Screen
        name="Profile"
        component={Profile}
        options={({ navigation }) => ({
          headerLeft: () => (
            <TouchableOpacity
              onPress={() => {
                navigation.popTo('HomeDrawer');
                navigation.openDrawer();
              }}
              style={{paddingHorizontal: 16}}
            >
              <Text>返回</Text>
            </TouchableOpacity>
          )
        })}
      />
      {/* 自定义About页面返回逻辑 */}
      <Stack.Screen
        name="About"
        component={About}
        options={({ navigation }) => ({
          headerLeft: () => (
            <TouchableOpacity
              onPress={() => {
                navigation.popTo('HomeDrawer');
                navigation.openDrawer();
              }}
              style={{paddingHorizontal: 16}}
            >
              <Text>返回</Text>
            </TouchableOpacity>
          )
        })}
      />
    </Stack.Navigator>
  )
}

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

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

修正后的DrawerContent组件代码 #

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

const DrawerContent = props => {
    return (
        <DrawerContentScrollView {...props}>
            {/* 删除原有DrawerItemList，消除默认Home菜单项 */}
            <DrawerItem 
                label='Profile' 
                onPress={() => props.navigation.navigate('Profile')} 
            />
            <DrawerItem 
                label='About' 
                onPress={() => props.navigation.navigate('About')} 
            />
        </DrawerContentScrollView>
    )
}

export default DrawerContent;

内容的提问来源于stack exchange，提问作者four-eyes