关于React Native 项目中,IOS键盘收起时留白问题
最近在项目中遇到一个bug,在iphone上输入内容后,点击键盘上的完成,收起IOS键盘时,再点击提交按钮时点击事件不触发。
我仔细排查了一遍代码,没有发现问题,说明是其他因素造成的。经过一番bug复现,
后来在iphone6 plus上定位了问题所在。 原来是IOS键盘弹出时,会把页面顶上去,使一部分空白空间遮挡住了提交按钮所导致的。并且点击IOS键盘上的完成或者屏幕使TextINput失去焦点时,被顶起的页面不会马上还原,直到你再次点击屏幕时,页面才会恢复,这时点击按钮才能触发事件。
问题找到了,那么接下来说说是怎么解决的,我是在TextInput 的 onBlur事件里,控制页面滑动,手动让被顶起的页面还原。
上代码:
onBlur = () =>{
this.container.current.scrollIntoView({
behavior: "smooth" })