react-native解决键盘自适应

Posted 2023-05-08

参考技术A 我们都知道，在app的开发中输入框被键盘遮挡已经是众所周知的问题了。

在android系统的app中系统已经作恶键盘自适应。就是当输入框将要被键盘遮挡的时候，输入框会自动向上移动，达到不被键盘遮挡的程度；

那么在ios中，系统没有处理。一般我们会对键盘的做事件的监听，来手动控制输入框的位置。

在后来随着 IQKeyBoardManage r的应用，在iOS中也实现了输入框随着键盘的高度而移动。

那么问题来了，在 react-native 中，开发的iOS应用存在这样的问题。而android没有。

npm install --save react-native-keyboard-mgr

如果你想在某些场景禁用键盘自适应，只需要使用 setEnabled(false) 就可以了，

如果你想启用, 只需要使用 setEnabled(true) 就可以了。

react-native-keyboard-mgr 为什么叫react-native-keyboard-mgr呢？应为/react-native-keyboard-manager已经被占用了。多么痛的领悟！！！

从此键盘自适应完美解决！

推荐文章
vue的toast和loading组件

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方法，收回键盘。

第四步，自行测试效果。

以上是对不能收回键盘问题的分析和处理方法的介绍，如果有更好的解决办法，欢迎分享。