当键盘以 react-native 显示时自动向上滚动视图 [英] Automatically scroll the view up when keyboard is shown in react-native

问题描述

当我聚焦在 TextInput 框中并且显示键盘时如何自动向上滚动视图，以便 TextInput 框不会隐藏在键盘后面?这个问题在 StackOverflow 上被问过几次，我实施了解决方案 此处 这是大多数答案中建议的通用解决方案.此解决方案在 iPhone 模拟器中运行良好，但不适用于实际手机.有没有其他人遇到过该解决方案在实际手机上不起作用的问题?

How can I automatically scroll the view up when I focus in a TextInput box and a keyboard is shown such that the TextInput box is not hidden behind the keyboard? This question has been asked on StackOverflow a few times and I implemented the solution here which is the general solution advised in most of the answers. This solution works fine in the iPhone simulator but doesn't work on the actual phone. Has anyone else experienced this problem that the solution doesn't work on the actual phone?

添加此解决方案后我注意到的第二件事是，现在如果我聚焦在 TextInput 框中并显示键盘，如果我按下按钮或尝试聚焦到不同的 TextInput 框中，则始终会消耗第一次触摸隐藏键盘且按钮未按下或其他 TextInput 框未聚焦.用户必须进行两次操作，这有点烦人.有没有其他人注意到这个问题?

Second thing that I noticed after adding this solution is that now if I am focussing in a TextInput box and keyboard is shown, if I press a button or try to focus into a different TextInput box, the first touch is always consumed to hide the keyboard and the button is not pressed or the other TextInput box is not focussed. It is a little annoying for the user to have to do the operation twice. Has anyone else observed this problem?

如果您对如何解决这些问题有任何意见，请告诉我?

Please let me know if you have any inputs on how to solve these problems?

推荐答案

我假设您正在使用这个解决方案.我遇到了同样的问题并做了一些调整(见要点).我解决了你描述的两个问题.keyboardShouldPersistTaps 解决了您的第二个问题.

I assume you are using this solution. I ran into the same problem and made some adjustments (see gist). I addressed both problems you describe. keyboardShouldPersistTaps solves your second problem.

我还没有找到间距在模拟器中起作用但在真实设备上不起作用的确切原因.它与时间有关.原始代码在输入焦点上设置超时并尝试在 50 毫秒后向下滚动.将其增加到例如 500 毫秒也可以在设备上运行，但我真的不喜欢添加我不理解的魔术超时.我改变了它，所以 onFocus 我查找要滚动到的元素并存储引用.当 onKeyboardDidShow 触发时，我使用参考.

I have not found the exact reason why the spacing works in Simulator but not on a real device. It has something to do with the timing. The original code sets a timeout on input focus and tries to scroll down after 50ms. Increasing this to for example 500ms makes it work on devices too, but I don't really like adding magic timeouts that I don't understand. I changed it, so onFocus I look up the element to scroll to and store a reference. When onKeyboardDidShow fires I use the reference.

这篇关于当键盘以 react-native 显示时自动向上滚动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！