React-native中多个textInput键盘不能收回的问题的原因分析及解决办法
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-native中多个textInput键盘不能收回的问题的原因分析及解决办法相关的知识,希望对你有一定的参考价值。
参考技术A 最近有人问过这个问题,貌似好没有出现很好的解决办法,写一篇文章分享一下自己之前遇到并处理的过程,希望能给大家一些帮助。项目中遇到过这么一种情况的bug:
当前页面存在三个textInput,页面内做了点击空白区域键盘会自动收回的处理。
正常情况:选中某一个textInput,输入内容,然后点击空白区域,键盘收回,然后再次选中下一个textInput,键盘再次弹起,然后输入内容,点击空白键盘收回,依次往下。必须逐个选中,取消选中,才能正常。
在实际使用的情况中,用户往往会在第一个textInput输入内容,然后直接选中第二个textInput,输入内容,然后再选择下一个,所有内容输入完毕以后,点击空白区域,需要键盘收回。这个时候bug就出现了。你会发现此时键盘无法收回。多次测试以后,发现必须选择让键盘弹起的那个输入框以后,点击空白区域,键盘才能正常收回。
网上查询了很多资料并没有找到解决办法,只好是翻源码。
在react-native/Libraries/Components/TextInput目录下。在TextInputState中找到对应的方法,blueTextInput方法。需要传入一个_currentlyFocusedID才能收回键盘。
通过在源码中加log的方式,一步步确定,这个id值是在选中某一TextInput时,键盘弹起的时候根据TextInput对应创建的,出现问题的根本原因在于,当第一个键盘没有收回而直接选中第二个textInput的时候,因为键盘对象存在,所以不会重新执行键盘弹出的方法,导致选中另外一个TextInput的时候,当前键盘的_currentlyFocusedID为null,所以点击空白区域需要收回键盘的时候,在blurTextInput方法里传入的textFieldID为null,导致无法收回键盘。
现在bug 的原因找到了,怎么修复这个bug。
第一种,简单粗暴,改源码,无脑的把判定条件删除掉,但是这可能导致更多未知的bug。不选择。
第二种,自己管理好键盘对应的id。
下面介绍第二种解决办法。
第一步,在页面文件中,导入TextInputState文件。
第二步,TextInput选中的方法里,通过一个变量,记录一下当前键盘的currentlyFocusedID。
第三步,在需要键盘收回的地方,调用focusTextInput方法,将currentlyFocusedID传入TextInputState中,然后,调用TextInputState中的blurTextInput方法,收回键盘。
第四步,自行测试效果。
以上是对不能收回键盘问题的分析和处理方法的介绍,如果有更好的解决办法,欢迎分享。
以上是关于React-native中多个textInput键盘不能收回的问题的原因分析及解决办法的主要内容,如果未能解决你的问题,请参考以下文章
ScrollView 在 react-native 中渲染没有数据的更新组件?
React Native 之 TextInput(多个语法知识)
TextInput 在 react-native 中隐藏在键盘后面
如何设置状态(数组)并验证使用循环添加的多个 TextInputs - 反应原生