项目场景:
项目中需要使用到TextInput输入框,同时项目底部的导航栏使用绝对定位。
问题描述:
在安卓上出现了TextInput获取焦点时,软键盘弹出时会将底部的导航栏给顶起来。
原因分析:
此种情况只有安卓系统才有,ios则没有这个bug,RN官网给出了解释和解决办法:
然鹅,我用的项目模板根本就没这个配置文件。。。
而且,尝试去掉绝对定位后,底部依然会被顶上来。
于是换了一种思路:
监听软键盘的弹出和收起事件,在软键盘弹出的时候将底部导航栏隐藏掉;软键盘收起的时候将底部导航栏显示出来。不监听焦点事件的原因是因为安卓上软键盘上会有向下的按钮,点击它在键盘收起的同时,焦点依然获取着,不能够作为判断的依据。(貌似没啥问题,实际上还是有大坑)
解决方案:
这里使用RN提供的Keyboard模块来监听软键盘的弹出和收起事件。
通过addListener注册一个 JavaScript 函数来监听处理原生键盘通知事件。
componentWillMount() {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._KeyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide'