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

Question

我在React Native中处理硬件后退按钮android时遇到问题，当我在硬件/设备中按下后退按钮时，我想返回特定的页面/组件，但我总是收到错误"未定义不是对象(正在评估"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)
}} />;
}
}

在这种情况下，我有三个组件，它们是OnBoarding、Welcome、Login，当在Login中发帖时，我想在按下硬件后退按钮时返回OnBoardin，请帮助我解决这个问题。

谢谢。

Answer 1

您必须使用导航服务，因为您希望从导航之外(应用程序的根目录(进行导航。您可以遵循文档。

https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html