React Native:如何在键盘上方保持多行textinput可见

时间:2016-05-24 14:14:40

标签: javascript ios react-native textinput

我有一个多行设置为true的TextInput。 我正在滚动到焦点输入:

scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
  React.findNodeHandle(this.refs.myInput),
  0,
  true
);

但是,当多行TextInput展开时,文本将隐藏在键盘下方。 我只想在光标/当前文本不可见时向下滚动。所以我不能只在文本更改上运行上面的代码,因为它会滚动视图,即使当前光标/当前文本是可见的(如在第一行编辑)。

有没有办法让屏幕上的光标/当前文字位置? 或者还有其他方法可以做我正在尝试的事情吗?

目前:

enter image description here

我想要实现的目标: enter image description here

3 个答案:

答案 0 :(得分:2)

您可以使用View提供的onLayout方法(文本扩展名)。它返回视图的尺寸,您可以使用它来重新计算滚动视图的滚动位置。

答案 1 :(得分:0)

我找到了这个组件......但它对我不起作用(我在“导入”时遇到错误)。我认为他们最终会得到修复。

https://github.com/VansonLeung/react-native-keyboard-aware-view

答案 2 :(得分:0)

最好的方法是使用react-native-keyboard-aware-scroll-view库并使用方法_scrollToInput并按照文档所说的内容进行操作。

enter image description here

我必须改变的一件事是调用" this.scroll.props.scrollToFocusedInput(reactNode)"而不是" this.scroll.scrollToFocusedInput(reactNode)"在文档中!