如何在React Native中处理硬件后退按钮android？

我在android React Native中处理硬件后退按钮时遇到问题，我想在按下硬件/设备中的后退按钮时返回特定页面/组件，但我总是得到错误“undefined不是一个对象（评估“this.props.navigation”）

这是我的剧本：

    import { Platform, StyleSheet, Text, View, BackHandler } from 'react-native';
    import { createStackNavigator, createAppContainer, NavigationActions, createBottomTabNavigator } from 'react-navigation';

    import OnBoarding from './apps/src/onBoarding/OnBoarding';
    import Welcome from './apps/src/welcome/Welcome';
    import Login from './apps/src/login/Login';

    const MainNavigator = createStackNavigator({
      OnBoarding: OnBoarding,
      Welcome: Welcome,
      Login: Login
    },{
      initialRouteName: 'OnBoarding',
      headerMode: 'none',
      navigationOptions: {
        headerVisible: false
      }
    });

    const Approot = createAppContainer(MainNavigator);
    var screen = '';

    export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          routeName: ''
        }
      }

      componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
      }

      componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
      }

      handleBackButton() {
        if(screen == 'Login') {
          this.props.navigation.navigate('OnBoarding');
        }else{
          return false;
        }
      }

      getActiveRouteName(navigationState) {
        if (!navigationState) {
          return null;
        }
        const route = navigationState.routes[navigationState.index];
        // dive into nested navigators
        if (route.routes) {
          return this.getActiveRouteName(route);
        }
        return route.routeName;
      } 

      render() {
        return <Approot onNavigationStateChange={(prevState, currentState) => {
            screen = this.getActiveRouteName(currentState)
          }} />;
      }
    }

import{Platform，StyleSheet，Text，View，BackHandler}来自'react native'；
从“react navigation”导入{createStackNavigator、createAppContainer、NavigationActions、createBottomTabNavigator}；
从“./apps/src/OnBoarding/OnBoarding”导入入职；
从“/apps/src/Welcome/Welcome”导入欢迎；
从“/apps/src/Login/Login”导入登录名；
const MainNavigator=createStackNavigator({
入职：入职，
欢迎:欢迎,，
登录：登录
},{
initialRouteName:“登录”，
headerMode:“无”，
导航选项：{
headervible:错误
}
});
const approt=createAppContainer（MainNavigator）；
变量屏幕=“”；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
路由名称：“”
}
}
componentDidMount（）{
BackHandler.addEventListener（'hardwareBackPress'，this.handleBackButton）；
}
组件将卸载（）{
BackHandler.removeEventListener（'hardwareBackPress'，this.handleBackButton'）；
}
把手按钮（）{
如果（屏幕==“登录”）{
this.props.navigation.navigate（'onboard'）；
}否则{
返回false；
}
}
getActiveRouteName（导航状态）{
如果（！navigationState）{
返回null；
}
const route=navigationState.routes[navigationState.index]；
//潜入嵌套的导航器
if（route.routes）{
返回此.getActiveRouteName（路由）；
}
返回route.routeName；
} 
render（）{
返回{
screen=this.getActiveRouteName（当前状态）
}} />;
}
}

在这种情况下，我有3个组件，他们是登船，欢迎，登录，当登录我想回到登船时，按下硬件返回按钮，请帮助我解决这个问题

---

谢谢。

您必须使用导航服务，因为您需要从导航之外（应用程序的根目录）进行导航。您可以按照文档进行操作