React Native抽屉导航：设备返回按钮跳转前页面问题求助

核心原因 #

你的抽屉导航（Drawer）是作为Stack导航的一个屏幕存在的，默认硬件返回键会触发Stack导航的返回逻辑（回到闪屏页甚至退出APP），而非抽屉内部的页面返回。

解决方案 #

方案1：在抽屉导航组件中统一监听返回键 #

修改sidemenubar.js，添加硬件返回键监听，根据抽屉路由栈状态决定返回行为：

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { BackHandler } from 'react-native';
import { useFocusEffect, useNavigation } from '@react-navigation/native';

const Drawer = createDrawerNavigator();

const MyDrawer = () => {
  const navigation = useNavigation();

  useFocusEffect(
    React.useCallback(() => {
      const handleBackPress = () => {
        // 获取抽屉导航的当前路由状态
        const drawerRouteState = navigation.getState();
        // 如果抽屉内路由栈长度大于1，说明不是初始页面，执行返回
        if (drawerRouteState.routes.length > 1) {
          navigation.goBack();
          return true; // 拦截系统默认返回行为
        }
        // 是初始页面时，允许系统退出APP
        return false;
      };

      // 添加返回键监听
      BackHandler.addEventListener('hardwareBackPress', handleBackPress);

      // 组件卸载时移除监听
      return () => BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
    }, [navigation])
  );

  return (
    <Drawer.Navigator
      drawerContent={props => <CustomDrawer {...props} />}
      useLegacyImplementation={true}
      initialRouteName="Dashboard">
      <Drawer.Screen name="Dashboard" component={Dashboard} />
      <Drawer.Screen name="About" component={About} />      
    </Drawer.Navigator>
  );
};

export default MyDrawer;

方案2：优化闪屏页跳转逻辑（可选） #

如果闪屏页不需要返回，跳转时使用replace替代navigate，让Stack路由栈仅保留抽屉导航页面，避免返回闪屏页：

修改Splash.js中的跳转代码：

// 替换原来的 navigation.navigate('Sidemenubar')
navigation.replace('Sidemenubar');

同时在闪屏页添加返回键监听，直接退出APP：

import { BackHandler, useEffect } from 'react-native';

const Splash = ({ navigation }) => {
  useEffect(() => {
    const timer = setTimeout(() => {
      navigation.replace('Sidemenubar');
    }, 2000);

    const handleBackPress = () => {
      // 闪屏页点击返回直接退出
      return true;
    };

    BackHandler.addEventListener('hardwareBackPress', handleBackPress);

    return () => {
      clearTimeout(timer);
      BackHandler.removeEventListener('hardwareBackPress', handleBackPress);
    };
  }, [navigation]);

  // 渲染闪屏内容
  return (
    // ... 你的闪屏UI代码
  );
};

处理后，About页面点击硬件返回键会回到Dashboard，Dashboard页面点击返回键则直接退出APP，符合预期行为。

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