react native 之 Android物理返回鍵

標籤：routes   rom   const   不能   com   應用   app   react   回退   

基本用法

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

1 BackAndroid.addEventListener(‘hardwareBackPress‘, this.onBackPressed);2 BackAndroid.removeEventListener(‘hardwareBackPress‘, this.onBackPressed);

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

 1 class App extends React.Component { 2   componentWillMount() { 3     if (Platform.OS === ‘android‘) { 4       BackAndroid.addEventListener(‘hardwareBackPress‘, this.onBackAndroid); 5     } 6   } 7   componentWillUnmount() { 8     if (Platform.OS === ‘android‘) { 9       BackAndroid.removeEventListener(‘hardwareBackPress‘, this.onBackAndroid);10     }11   }12   onBackAndroid = () => {13     const nav = this.navigator;14     const routers = nav.getCurrentRoutes();15     if (routers.length > 1) {16       nav.pop();17       return true;18     }19     return false;20   };21   ……22 }

注意這裡為了方便後續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中文社區

react native 之 Android物理返回鍵