react native 之 Android物理返回键 _android

归志宁无五亩园，读书本意在元元。这篇文章主要讲述react native 之 Android物理返回键相关的知识，希望能为你提供帮助。
基本用法根据文档，安卓back键的处理主要就是一个事件监听：

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

【react native 之 Android物理返回键】在starter-kit里，我们在App这一级别，实现了按back键回退导航栈的功能：

1 class App extends React.Component { 2componentWillMount() { 3if (Platform.OS === ‘android‘) { 4BackAndroid.addEventListener(‘hardwareBackPress‘, this.onBackAndroid); 5} 6} 7componentWillUnmount() { 8if (Platform.OS === ‘android‘) { 9BackAndroid.removeEventListener(‘hardwareBackPress‘, this.onBackAndroid); 10} 11} 12onBackAndroid = () => { 13const nav = this.navigator; 14const routers = nav.getCurrentRoutes(); 15if (routers.length > 1) { 16nav.pop(); 17return true; 18} 19return 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中文社区