前端之家收集整理的这篇文章主要介绍了
react native 之 Android物理返回键，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_
404_2@根据文档，安卓back键的处理主要就是一个事件监听：
1 BackAndroid.addEventListener('hardwareBackPress',this.onBackPressed);
2 BackAndroid.removeEventListener('hardwareBackPress',this.onBackPressed);
@H_
404_2@在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 }
@H_
404_2@注意这里为了方便后续removeEventListener，采用了用绑定this的
函数属性的
方法来创建回调
函数，而非箭头
函数或者bind(this)，这一点参考之前的博文
@H_
404_2@
代码中，当componentWillMount的时候挂接事件。对于应用根组件来说，这个生命周期就基本和我们应用的生命周期一致了。当back键被按下的时候，首先检查当前的导航栈，如果多余一个
页面，则退回顶部的
页面。
说明：BackAndroid在iOS平台下是一个空实现，所以理论上不做这个Platform.OS === 'android'判断也是安全的。
使用默认行为/退出应用
@H_
404_2@back键的默认行为就是
退出应用了。我们通常需要判断某些条件，并最后决定是否要
退出应用。上文中的例子就使用了第一种
调用默认行为的
方法：
如果所有事件监听函数中，没有任何一个返回真值，就会默认调用默认行为
@H_
404_2@如果你只挂接了一个监听
函数，那么你的返回值就决定了是否要
调用默认行为：true为
不调用，false为
调用。
@H_
404_2@在上文
代码中，我们如果导航栈多于一个
页面，就不
调用默认行为，而如果只有一个
页面，则
调用默认界面。
例子：“再按一次退出应用”
@H_
404_2@常有这种需求：按下back键以后，弹出一个toast，然后在一定时间内再按一次，才
退出应用。这个
代码就可以这样写：
onBackAndroid = () => {
if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
//最近2秒内按过back键，可以退出应用。
return false;
}
this.lastBackPressed = Date.now();
ToastAndroid.show('再按一次退出应用');
return true;
};
@H_
404_2@还有一种情况，我们在监听
函数中不能决定是否要
调用默认行为，要等待一个异步操作之后才
调用默认行为，此时可以通过第二种办法：
使用BACKANDROID.EXITAPP()来退出应用。
例子：在退出应用之前保存数据
@H_
404_2@写法1：
onBackAndroid = () =>{
saveData().then(()=>{
BackAndroid.exitApp();
});
return true;
}
@H_
404_2@在监听
函数中，我们开始异步事件，并直接return true。此时默认行为不会被
调用。当保存完毕后，我们
调用exitApp()，触发默认行为，
退出应用。
@H_
404_2@写法2：
onBackAndroid = async () =>{
await saveData();
BackAndroid.exitApp();
}
@H_
404_2@这里我们用了async
函数，async
函数总是返回一个Promise，Promise作为一个对象，也被认为是一个“真值”，所以这种情况下默认行为总是不会被
调用。当保存完毕后，我们
调用exitApp()，触发默认行为，
退出应用。
根据当前界面决定作何动作
@H_
404_2@有时候我们有这样的需求：当
用户处于某些界面下时，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;
};
@H_
404_2@
原文转载自:React Native中文社区@H_770_301@
