React Native API模块BackAndroid自定义返回键事件处理
基本用法
根据文档,安卓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('再按一次退出应用', ToastAndroid.SHORT);
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;
};
相关文章
- python 命令行 解析模块 optparse、argparse
- [转] Javascript模块化编程(一):模块的写法
- UWA学堂 | 优化模块
- Nodejs进阶:核心模块Buffer常用API使用总结
- 【算法】【二叉树模块】根据二叉树的先序、中序、后序两两组合重构二叉树工具方法
- Nodejs进阶:核心模块Buffer常用API使用总结
- Python自动化运维--系统基础信息模块
- 三、Python3自动化运维——DNS处理模块dnspython
- python run module as a script 同脚本一样执行python内置模块
- Func常用模块及API
- 《PowerShell V3——SQL Server 2012数据库自动化运维权威指南》——1.7 发现SQL相关的cmdlets和模块
- python搜索模块如何查询
- 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(十三)台风模块
- 浅析了解实现微前端的3种模式(自组织Nginx路由分发、基座容器模式、模块加载模式)、webpack5 Module Federation(模块联邦)是什么、基于模块联邦实现微前端的方案学习
- 51系列、arduino、stm32系列驱动DAC模块TLC5615输出指定电压(可修改为波形输出)
- fs模块常用API
- 【蓝桥杯嵌入式组】七、KEY模块
- Python requests模块解析XML
- python基础之range()函数和random模块
- npm 安装 卸载 模块;npm 安装指定版本的包(转载)
- 搭建maven聚合工程包含springboot模块