如何实现抽屉导航项跳转至栈导航的指定页面？

核心思路 #

不能直接给Drawer.Screen的component设为null或留空，得用空占位组件兜底，然后通过options.onPress手动触发导航逻辑，跳转到嵌套栈里的目标页面。

具体实现步骤 #

1. 定义空占位组件 #

先写一个啥也不渲染的极简组件，用来满足component必填的要求：

const EmptyPlaceholder = () => null;

2. 配置抽屉的Profile项 #

把component设为上面的空组件，然后在options里写导航逻辑：

<Drawer.Screen
  name="Profile"
  component={EmptyPlaceholder}
  options={{
    // 隐藏空组件的头部（如果抽屉导航默认带头部的话）
    headerShown: false,
    onPress: ({ navigation }) => {
      // 先关闭抽屉，提升体验
      navigation.closeDrawer();
      // 多层嵌套导航跳转，路径要和你实际的导航名称对应
      navigation.navigate('你的Tab导航名称', {
        screen: '你的栈导航名称',
        params: {
          screen: 'Profile' // 栈里的Profile页面名称
        }
      });
    }
  }}
/>

3. 完整示例代码 #

假设你的导航嵌套是Drawer > MainTabs > HomeStack，其中HomeStack包含ProfileScreen，完整代码如下：

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

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

// 空占位组件
const EmptyPlaceholder = () => null;

// 嵌套的栈导航
function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

// 嵌套的Tab导航
function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="HomeStack" component={HomeStack} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

// 顶层抽屉导航
export default function AppDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="MainTabs" component={MainTabs} />
      <Drawer.Screen
        name="Profile"
        component={EmptyPlaceholder}
        options={{
          headerShown: false,
          onPress: ({ navigation }) => {
            navigation.closeDrawer();
            // 按实际导航名称调整路径
            navigation.navigate('MainTabs', {
              screen: 'HomeStack',
              params: {
                screen: 'Profile'
              }
            });
          }
        }}
      />
    </Drawer.Navigator>
  );
}

注意事项 #

• 导航名称必须和你代码里定义的name完全一致，比如你的Tab导航叫TabBar，就把MainTabs替换成TabBar
• 如果需要给ProfileScreen传参数，在params里再加一层：params: { screen: 'Profile', params: { userId: 123 } }

内容的提问来源于stack exchange，提问作者JeremyFc