React Native android 平台的键盘处理方案

在点评列表转RN 的过程中,android 的键盘处理,也存在一定的问题,因为android 的手机存在back 键,对于常规意义上的android 键盘,存在2种场景,

一种是,在键盘弹起的时候,一次按back 键,键盘消失,第二次按,页面消失
第二种是,在键盘弹起的时候,第一次主动的按back 键,键盘消失,按一次界面消失

js 中 有 Keyboard 这个类来处理键盘相关的操作
具体处理方式

componentWillMount() {
     if (Platform.OS === 'android') {
       this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
       this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
     }
  }

  componentWillUnmount() {
    if (Platform.OS === 'android') {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
    }
  }

注册监听

代码中添加回调方法

keyboardDidShow() {
  this.isShowkeybord = true;
  }
  keyboardDidHide() {
    this.closeTime = new Date().getTime();
    this.isShowkeybord = false;
}

哪我们在点击back 键的时候会触发

  handlerOnRequestClose() {}

哪我门就在这个方法中处理我门back 相关的事件。其实在处理的时候,区分上面上面说的哪两种情况,并且在点击back 的时候,keyboarDidHide() 和 handlerOnRequestClose() 先后执行,所以不好控制区分这两种场景
现在提出一种结局方案,因为按两次back 的第二次 上面的两种方法 是接连执行的,时间很短暂,要是 手动关闭键盘,然后点击back 键的时候,上面两个方法的执行时间差 是大于连续点击back 的时间差的。所以我门通过判断时间差来区分两者不同的点击

  //android
  handlerOnRequestClose() {
    const now = new Date().getTime();
    const span = now - this.closeTime;
    if (span < 400 && !this.state.isHasClosed) {
      this.setState({
            isHasClosed: true
         });
      return;
    }
    if (!this.isShowkeybord) {
         this.close();
         this.setState({
            isHasClosed: false
         });
    }
  }

这个span 是个统计值,这只是一种无奈的结局方案,后面还希望有更好的结局方案。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值