react native 之 Android物理返回鍵

基本用法

根據文檔，安卓back鍵的處理主要就是一個事件監聽：

BackAndroid.addEventListener('hardwareBackPress', this.onBackPressed);
BackAndroid.removeEventListener('hardwareBackPress', this.onBackPressed);

在starter-kit里，我們在App這一級別，實現了按back鍵回退導航棧的功能：

class App extends React.Component {
  componentWillMount() {
    if (Platform.OS === 'android') {
      BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }
  componentWillUnmount() {
    if (Platform.OS === 'android') {
      BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }
  onBackAndroid = () => {
    const nav = this.navigator;
    const routers = nav.getCurrentRoutes();
    if (routers.length > 1) {
      nav.pop();
      return true;
    }
    return false;
  };
  ……
}

注意這里為了方便后續removeEventListener，采用了用綁定this的函數屬性的方法來創建回調函數，而非箭頭函數或者bind(this)，這一點參考之前的博文

代碼中，當componentWillMount的時候掛接事件。對於應用根組件來說，這個生命周期就基本和我們應用的生命周期一致了。當back鍵被按下的時候，首先檢查當前的導航棧，如果多余一個頁面，則退回頂部的頁面。

說明：BackAndroid在iOS平台下是一個空實現，所以理論上不做這個Platform.OS === 'android'判斷也是安全的。

使用默認行為/退出應用

back鍵的默認行為就是退出應用了。我們通常需要判斷某些條件，並最后決定是否要退出應用。上文中的例子就使用了第一種調用默認行為的方法：

如果所有事件監聽函數中，沒有任何一個返回真值，就會默認調用默認行為

如果你只掛接了一個監聽函數，那么你的返回值就決定了是否要調用默認行為：true為不調用，false為調用。

在上文代碼中，我們如果導航棧多於一個頁面，就不調用默認行為，而如果只有一個頁面，則調用默認界面。

例子：“再按一次退出應用”

常有這種需求：按下back鍵以后，彈出一個toast，然后在一定時間內再按一次，才退出應用。這個代碼就可以這樣寫：

  onBackAndroid = () => {
    if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
      //最近2秒內按過back鍵，可以退出應用。
      return false;
    }
    this.lastBackPressed = Date.now();
    ToastAndroid.show('再按一次退出應用');
    return true;
  };

還有一種情況，我們在監聽函數中不能決定是否要調用默認行為，要等待一個異步操作之后才調用默認行為，此時可以通過第二種辦法：

使用BACKANDROID.EXITAPP()來退出應用。

例子：在退出應用之前保存數據

寫法1：

  onBackAndroid = () =>{
    saveData().then(()=>{
      BackAndroid.exitApp();
    });
    return true;
  }

在監聽函數中，我們開始異步事件，並直接return true。此時默認行為不會被調用。當保存完畢后，我們調用exitApp()，觸發默認行為，退出應用。

寫法2：

  onBackAndroid = async () =>{
    await saveData();
    BackAndroid.exitApp();
  }

這里我們用了async函數，async 函數總是返回一個Promise，Promise作為一個對象，也被認為是一個“真值”，所以這種情況下默認行為總是不會被調用。當保存完畢后，我們調用exitApp()，觸發默認行為，退出應用。

根據當前界面決定作何動作

有時候我們有這樣的需求：當用戶處於某些界面下時，back鍵要做特殊的動作，如：提示用戶是否要保存數據，或者解鎖界面禁止back鍵返回等等。此時，最佳實踐是在route或route中對應的Component上保存關於如何處理back鍵的信息：

 

onBackAndroid = () => {
    const nav = this.navigator;
    const routers = nav.getCurrentRoutes();
    if (routers.length > 1) {
      const top = routers[routers.length - 1];
      if (top.ignoreBack || top.component.ignoreBack){
        // 路由或組件上決定這個界面忽略back鍵
        return true;
      }
      const handleBack = top.handleBack || top.component.handleBack;
      if (handleBack) {
        // 路由或組件上決定這個界面自行處理back鍵
        return handleBack();
      }
      // 默認行為： 退出當前界面。
      nav.pop();
      return true;
    }
    return false;
  };

原文轉載自:React Native中文社區