【问题标题】:Automatically scroll the view up when keyboard is shown in react-native当键盘以 react-native 显示时自动向上滚动视图
【发布时间】:2016-05-27 10:54:01
【问题描述】:

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

添加此解决方案后我注意到的第二件事是,现在如果我专注于 TextInput 框并显示键盘,如果我按下按钮或尝试专注于不同的 TextInput 框,第一次触摸总是消耗到隐藏键盘且未按下按钮或其他 TextInput 框未聚焦。用户必须执行两次操作有点烦人。有其他人观察到这个问题吗?

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

【问题讨论】:

  • @NaderDabit 我尝试了您推荐的上述软件包,但对我来说效果不佳。例如,在其中一个屏幕中,我有一个 DatePicker 和几个输入框,当我按下任何输入框并显示键盘时,由于视图向上滚动,输入框将向上移动,但 DatePicker 不会导致输入框与 DatePicker 重叠。我只能快速尝试一下,因为我正在移动应用程序中实现一项功能,并且我的代码中可能存在导致上述行为的问题。我会再试一次并重新评论。

标签: react-native react-native-scrollview


【解决方案1】:

我假设您使用的是this solution。我遇到了同样的问题并做了一些调整(see gist)。我解决了你描述的两个问题。 keyboardShouldPersistTaps 解决了您的第二个问题。

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

【讨论】:

  • 感谢您的回复。由于我无法尝试您的解决方案,我正处于中间状态。我会尽快尝试并分享我的经验。再次感谢您的帮助!
  • 您的解决方案运行良好。我还确认,当我将另一个解决方案中的超时时间增加到 500 时,它开始工作而无需任何其他更改,这是一个非常好的见解。
猜你喜欢
  • 2014-11-23
  • 1970-01-01
  • 2019-02-08
  • 1970-01-01
  • 2020-03-15
  • 2016-03-18
  • 1970-01-01
  • 2015-10-19
  • 2018-12-16
相关资源
最近更新 更多