混合app 解决常见bug弹出键盘返回出现闪屏

前言

在我们开发混合app中，我们会发现一个问题，那就是比如我们正在输入信息的时候，然后我们按导航的返回键返回，因为切页面和回收键盘是同时的，给人一种闪屏的感觉，那么怎么解决呢?

方案

以ionic为例子:

设置一个变量监听当前是否键盘弹出。

showKeyboard: boolean = false;

这时候呢，如果判断键盘为true的话就不返回。

this.getNavBar().backButtonClick = (e) => {
      if (that.showKeyboard) {
        return false;
      } else {
        //返回
        that.nav.pop();
      }
    }

在此解释一下合理性，为什么不返回为合理呢？这时候键盘弹出，按理说就应该点击其他地方让它失去焦点，而不是转移焦点。

那么我们需要些键盘监听事件:

 window.addEventListener('keyboardWillShow', this.keyboardShowCallback.bind(this));
 window.addEventListener('keyboardWillHide', this.keyboardHideCallback.bind(this));
  keyboardShowCallback() {
    this.showKeyboard = true;
  }

  keyboardHideCallback() {
    var that=this;
    setTimeout(()=>{
      that.showKeyboard=false;
    },500);
  }

这样可以达到理想效果。