react native 之 Android物理返回键
基本用法根据文档,安卓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; }; 还有一种情况,我们在监听函数中不能决定是否要调用默认行为,要等待一个异步操作之后才调用默认行为,此时可以通过第二种办法: 使用
|