美文网首页
ionic2/3 处理android返回键失效问题

ionic2/3 处理android返回键失效问题

作者: 前端小周郎 | 来源:发表于2018-03-28 11:06 被阅读0次

参考的方案

我的处理方法是基于小军617 给出的方案,请参考

ionic2实战-完美处理安卓硬件返回按钮
https://www.jianshu.com/p/6aa5a8318092?mType=Group

遇到的问题

app.component.ts中的rootPage设置为login页面,登录成功后设置根页面为tabs页面,调用的方法如下:

 this.navCtrl.setRoot('TabsPage',{}, {
keyboardClose: true,
isNavRoot: true
  });

进入到登录页面后,android返回键失灵。

解决方法

先看下小军处理方案中的一段主要代码:

let activeVC = this.nav.getActive();
let tabs = activeVC.instance.tabs;
let activeNav = tabs.getSelected();
return activeNav.canGoBack() ? activeNav.pop() : this.showExit()

通过this.nav.getActive()获取到当前激活的ViewController,然后处理返回逻辑。那么我为什么会遇到返回键失灵的问题呢?经过调试发现,当调用setRoot()方法后,此处的nav对象已经发生了变化,获取不到当前激活的ViewController。

问题的关键是如何获取到当前激活的ViewController,而这个我们可以通过当前的RootNavController获取。所以修改后的代码如下:

this.platform.registerBackButtonAction(() => {
  if (this.keyboard.isOpen()) {//如果键盘开启则隐藏键盘
    this.keyboard.close();
    return;
  }
  let rootNav = this.appCtrl.getRootNavs()[0];

  //如果想点击返回按钮隐藏toast或loading或Overlay就把下面加上
  let ionicApp = rootNav._app._appRoot;
  let activePortal = ionicApp._toastPortal.getActive() || ionicApp._loadingPortal.getActive()
    || ionicApp._overlayPortal.getActive() || ionicApp._modalPortal.getActive();

  if (activePortal) {
    let actInstance = activePortal.instance;
    if (actInstance instanceof LoginPage) {
      return this.nativeSv.alertExitApp('确认退出软件?');
    } else if (actInstance instanceof ContactSelectPage) {
      return actInstance.closePage();
    }

    setTimeout(() => {//延迟200毫秒
      activePortal && activePortal.dismiss();
    }, 200);
    return;
  }

  let tabs = rootNav.getActive().instance.tabs;
  if (tabs) {
    let activeNav = tabs.getSelected();
    return activeNav.canGoBack() ? activeNav.pop() : this.nativeSv.minimize();//this.showExit()
  } else {
    return this.nativeSv.alertExitApp('确认退出软件?');
  }

}, 100);
}

设置root页面的代码也要修改一下:

 constructor(public appCtrl: App) { }

doLogin() {
  //登录成功后,跳转到tabs页面
  let rootNav = this.appCtrl.getRootNavs()[0];

  rootNav.setRoot(MainPage, {}, {
    keyboardClose: true,
    isNavRoot: true
  }).then(() => {
    this.storage.set("has-logined", true);
  });

  //登录失效后,已modal方式打开login页面
  //登录成功后,需要把modal关闭
  let activePortal = rootNav._app._appRoot._modalPortal.getActive();
  if (activePortal && activePortal.instance instanceof LoginPage) {
    this.viewCtrl.dismiss();
  }
}

相关文章

  • ionic2/3 处理android返回键失效问题

    参考的方案 我的处理方法是基于小军617 给出的方案,请参考 ionic2实战-完美处理安卓硬件返回按钮https...

  • 2019-07-09

    项目需要在HTML5 Android App中加入对返回键的处理,发现直接在Activity中加返回键处理代码不起...

  • ionic2捕捉android返回键

    本示例是ionic3.3,用了懒加载 在app.html中,添加#myNav,在app.component.ts文...

  • onDestory 流程

    问题:在原生android 界面中有三个按键:1-左边的是返回键2-中间是home键(主页)3-右边为返回后台运行...

  • Fragment返回键问题处理

    1.最近遇到一个问题,发现在一个activity里面切换多个fragment时,无法一级一级返回,尤其是在点击返回...

  • React Native BackHandler exitApp

    React Native 监听android 物理返回键 根据文档,安卓back键的处理主要就是一个事件监听: 导...

  • Android原生与H5互调

    Android调用H5页面展示H5页面信息并且拿到返回值进行加工处理以及相应Android返回键返回上一个页面的过...

  • ionic4处理android返回按钮事件

    前言 之前在这里介绍了ionic3如何处理android返回按钮 ionic4和ionic3关于android返回...

  • android

    1. Fragment监听返回键 2. LocationDemo(Android定位) 3. ZXing使用文档 ...

  • Android 问题大全

    Notification 8.0 适配 mac Android Studio 修改文件的快捷键失效

网友评论

      本文标题:ionic2/3 处理android返回键失效问题

      本文链接:https://www.haomeiwen.com/subject/cearcftx.html