记录ReactNative中使用TextInput遇到的问题

项目场景:

项目中需要使用到TextInput输入框,同时项目底部的导航栏使用绝对定位。


问题描述:

在安卓上出现了TextInput获取焦点时,软键盘弹出时会将底部的导航栏给顶起来。
软键盘弹出遇到的问题


原因分析:

此种情况只有安卓系统才有,ios则没有这个bug,RN官网给出了解释和解决办法:
RN提供的解决方法

然鹅,我用的项目模板根本就没这个配置文件。。。
在这里插入图片描述
而且,尝试去掉绝对定位后,底部依然会被顶上来。
于是换了一种思路:
监听软键盘的弹出和收起事件,在软键盘弹出的时候将底部导航栏隐藏掉;软键盘收起的时候将底部导航栏显示出来。不监听焦点事件的原因是因为安卓上软键盘上会有向下的按钮,点击它在键盘收起的同时,焦点依然获取着,不能够作为判断的依据。(貌似没啥问题,实际上还是有大坑)


解决方案:

这里使用RN提供的Keyboard模块来监听软键盘的弹出和收起事件。
通过addListener注册一个 JavaScript 函数来监听处理原生键盘通知事件。

componentWillMount() {
   
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._KeyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide'
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值