React Native安卓物理返回键处理报错求助：this.props.navigation未定义

我来帮你分析一下问题所在，并且给出修复方案：

错误原因分析 #

你遇到的undefined is not an object (Evaluating 'this.props.navigation')报错主要有两个核心原因：

1. this指向错误：handleBackButton函数没有正确绑定到App组件实例，导致函数内部的this并非组件本身，自然无法访问this.props。
2. 根组件无navigation props：你的App是根组件，navigation props只有被导航器直接包裹的子组件才会拥有，所以App组件本身根本不存在navigation这个props。

另外，使用全局变量screen存储当前路由也不是最佳实践，容易引发不可预测的副作用，建议改用组件内部state来管理。

修复后的完整代码 #

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, BackHandler } from 'react-native';
import { createStackNavigator, createAppContainer, NavigationActions } 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);

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      currentRoute: '' 
    };
    // 绑定handleBackButton的this指向，确保函数内能访问组件实例
    this.handleBackButton = this.handleBackButton.bind(this);
    // 初始化导航容器的ref，用于后续调用导航方法
    this.navigatorRef = null;
  }

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

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

  handleBackButton() {
    const { currentRoute } = this.state;
    if(currentRoute === 'Login') {
      // 通过导航容器ref执行页面跳转
      this.navigatorRef.dispatch(
        NavigationActions.navigate({ routeName: 'OnBoarding' })
      );
      return true; // 返回true表示我们已处理返回事件，阻止系统默认后退行为
    }else{
      return false; // 返回false让系统执行默认的后退逻辑
    }
  }

  getActiveRouteName(navigationState) {
    if (!navigationState) {
      return null;
    }
    const route = navigationState.routes[navigationState.index];
    // 处理嵌套导航器的情况
    if (route.routes) {
      return this.getActiveRouteName(route);
    }
    return route.routeName;
  }

  render() {
    return (
      <Approot 
        ref={(ref) => this.navigatorRef = ref}
        onNavigationStateChange={(prevState, currentState) => {
          // 更新state存储当前活跃路由
          this.setState({
            currentRoute: this.getActiveRouteName(currentState)
          });
        }} 
      />
    );
  }
}

关键修改点说明 #

1. 绑定this指向：在constructor中通过bind方法将handleBackButton的this绑定到组件实例，确保函数内部能正确访问组件的state和ref。
2. 用state管理路由：替换全局变量screen为组件state中的currentRoute，避免全局变量带来的副作用。
3. 获取导航容器ref：给Approot添加ref，通过该ref调用导航器的dispatch方法执行页面跳转，解决根组件无navigation props的问题。
4. 正确处理返回事件：在handleBackButton中，当当前是Login页面时返回true，告诉系统我们已处理返回操作；其他页面返回false，让系统执行默认后退逻辑。
5. 补全React导入：原代码缺少React和Component的导入，这在新版本React中会报错，因此补充了对应导入语句。

这样修改后，当你在Login页面按下物理返回键时，就能正常跳转到OnBoarding页面了。

内容的提问来源于stack exchange，提问作者Frank Andrew