如何在内部嵌套了堆栈的Drawer导航器中处理Android后退按钮

Question

我在堆栈导航器的顶部有一个抽屉导航器，然后从堆栈中的任何嵌套屏幕中，单击硬件后退按钮，就会调用根级别的抽屉式导航器屏幕的BackHandler侦听器。

const Drawer = createDrawerNavigator();

const DrawerNavigator = props => {
  return (
    <Drawer.Navigator
      drawerContent={props => <DrawerScreen {...props} />}
      initialRouteName={'HomeScreen'}
      drawerPosition={'right'}
      drawerStyle={{width: '100%', backgroundColor: 'transparent'}}
      screenOption={{backBehavior: 'order'}}>
      <Drawer.Screen
        name="App"
        component={AppStackNavigator}
        options={{gestureEnabled: false}}
      />
    </Drawer.Navigator>
  );
};

const RootStack = createSwitchNavigator(
  {
    Login: LoginStackNavigator,
    Drawer: DrawerNavigator,
    RouteNavigator: RouteNavigatorClass,
    OnBoardStack: OnboardStackNavigator,
    OTP: {
      screen: OTPScreen,
    },
  },
  {
    initialRouteName: 'RouteNavigator',
  },
);

如果我在任何屏幕中按下硬件后退按钮，都会调用主屏幕的后处理程序。当我将react-navigation 2.x升级到5.x时，它开始发生。>

我在堆栈导航器的顶部有一个抽屉导航器，然后从堆栈中的任何嵌套屏幕，单击硬件后退按钮，根级别的抽屉式导航器屏幕的BackHandler侦听器都是...

Answer 1

import { AndroidBackHandler } from "react-navigation-backhandler";

class SomeComponent extends React.Component {
  onBackButtonPressAndroid = () => {

    if (youWantToHandleTheBackButtonPress) {
      // do something
      return true;
    }

    return false;
  };

  render() {
    return (
      <AndroidBackHandler onBackPress={this.onBackButtonPressAndroid}>
        <BodyOfYourScreen />
      </AndroidBackHandler>
    );
  }
}

并且有效，我无法使用BackHandler.addEventListner（），]执行此操作