React Native - 监听设备back键操作（附：按下返回键后回到上一个页面）

作者：hangge | 2017-08-11 08:10

使用 React Native 开发移动应用时会发现，在 Android 设备上点击 back 键（物理返回键、后退键）会直接退出应用。如果有多个页面路由的话这样做体验不太好。

我们希望按下 back 键后，如果路由栈中有上一页则返回到上一页，如果没有再退出应用。

1，实现原理

（1）通过 React Native 提供的 BackAndroid 这个 API 组件可以监听 back 键操作事件。

（2）在事件响应中判断路由栈的情况，决定是返回上一视图还是退出应用。这里特别要注意 return 返回值：

返回 true，表示后退键按下事件已经被处理。
返回 false，表示后退事件没有被处理，那么这个事件就会被通知给 Android 操作系统，从而导致系统结束当前应用。

2，样例代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Navigator,
  BackAndroid,
  Platform,
} from 'react-native';

class App extends Component {
  //构造函数
  constructor(props) {
   super(props);
  }

  //组件初始渲染执行完毕后调用
  componentDidMount() {
    //如果当前是Android系统，则添加back键按下事件监听
    if(Platform.OS === "android") {
      BackAndroid.addEventListener('hardwareBackPress', ()=>{
        return this.handleBackAndroid(this.navigator);
      });
    }
  }

  //组件被卸载前会执行
  componentWillUnmount() {
    //如果当前是Android系统，则移除back键按下事件监听
    if(Platform.OS === "android") {
      BackAndroid.removeEventListener('hardwareBackPress', ()=>{});
    }
  }

  //back键按下事件响应
  handleBackAndroid(navigator) {
    //如果存在上一页则后退
    if(navigator.getCurrentRoutes().length > 1) {
      navigator.pop();
      return true; //接管默认行为
    }
    return false;  //使用默认行为（直接退出应用）
  }

  //..........
}

附：BackAndroid API 使用注意事项：

1，可以使用 BackAndroid 的 addEventListener 函数挂接多个监听器

（1）当返回键被按下时，最后一个加入的监听器会首先被执行。

（2）如果它返回 false，再执行倒数第二个加入的监听器......直到某一个监听器返回 true，则剩下的监听器都不会被执行。

（3）或者直到所有的监听器都执行完，将这个事件交给 Android 系统。

2，exitApp() 方法

BackAndroid API 还有一个静态函数 exitApp，能让应用马上结束。它使用很简单，就是无参数直接调用。

  ......
  BackAndroid.exitApp(); //这条语句后面不能再有其他代码
}

React / React Native