React Native DrawerNavigation中如何添加退出登录功能

问题根源 #

你的问题出在嵌套导航层级匹配错误：退出登录项被配置成了Drawer的Screen，点击时会在Drawer的导航栈内寻找对应路由，误匹配到了Homepage；同时未正确获取根Tab导航的实例，无法直接跳转到Tab层级的HomeScreen。

解决方案步骤 #

1. 将退出登录改为自定义Drawer项，避免作为Drawer.Screen触发路由匹配
2. 获取根Tab导航实例，通过navigation.getParent()穿透嵌套层级
3. 实现退出逻辑：清除登录状态 + 关闭Drawer + 重置Tab导航到HomeScreen

代码示例 #

1. 自定义Drawer内容组件

import { DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from '@react-navigation/native';

function CustomDrawer(props) {
  const navigation = useNavigation();
  // 获取根Tab导航（需确保TabNavigator设置了id="RootTab"）
  const rootTabNav = navigation.getParent('RootTab');

  const handleLogout = async () => {
    // 1. 清除用户登录状态（根据你的存储方式调整）
    await AsyncStorage.removeItem('userToken');
    
    // 2. 关闭Drawer
    navigation.closeDrawer();
    
    // 3. 重置Tab导航到HomeScreen，避免返回登录前页面
    rootTabNav?.reset({
      index: 0,
      routes: [{ name: 'Home' }] // 对应TabNavigator中HomeScreen的路由名称
    });
  };

  return (
    <DrawerContentScrollView {...props}>
      {/* 渲染原有的Drawer列表项 */}
      <DrawerItemList {...props} />
      {/* 添加退出登录自定义项 */}
      <DrawerItem
        label="退出登录"
        onPress={handleLogout}
      />
    </DrawerContentScrollView>
  );
}

2. 配置DrawerNavigator使用自定义内容

// Profile页面的StackNavigation内的Drawer配置
<DrawerNavigator.Navigator
  drawerContent={(props) => <CustomDrawer {...props} />}
>
  {/* 你的其他Drawer页面路由 */}
  <DrawerNavigator.Screen name="ProfileSettings" component={ProfileSettingsScreen} />
</DrawerNavigator.Navigator>

3. 为根TabNavigator设置ID

// 最底层的TabNavigator配置
<TabNavigator.Navigator id="RootTab">
  <TabNavigator.Screen name="Home" component={HomeStack} />
  <TabNavigator.Screen name="Profile" component={ProfileStack} />
  {/* 其他Tab项 */}
</TabNavigator.Navigator>

关键说明 #

• 不要将退出登录设为Drawer.Screen：否则点击时会在Drawer的导航栈内查找路由，导致加载错误页面
• 必须获取根Tab导航：嵌套导航中，子导航的navigation对象只能访问自身层级的路由，通过getParent('RootTab')才能拿到根Tab的导航实例
• 使用reset而非navigate：避免用户通过返回键回到登录前的Profile页面，确保导航栈完全重置

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