当有带React Native的输入附件时，如何滚动到焦点上的文本输入

Question

我正在使用React Native应用程序，许多屏幕都有带文本输入字段的表单。

当我按下文本输入时，键盘会打开。我创建了一个浮动的InputAccessory组件，它出现在键盘顶部以解除它，并在其上显示“Done”按钮。

但是现在我有了这个附件，当我点击输入字段或按下键盘上的“下一步”按钮转到下一个字段时，ScrollView会滚动以对齐文本输入的底部键盘的顶部。使用这个浮动附件会出现问题，如下所示，由于此附件，您无法看到文本输入的内容，并且我希望滚动视图滚动更多以显示整个文本输入。

我可以对此进行计算并从.scrollTo()组件运行ScrollView方法，但这种模式对我的整个应用程序非常常见，我正在寻找一个优雅的解决方案，可能是我每次导入文本输入并专注于它时都足够通用。

你有什么建议吗？

由于

Answer 1

之前我遇到过同样的问题，我有两种不同的解决方案，两者都适合我。

1-使用react-native-keyboard-aware-scroll-view，请注意，此库已包含scrollView，因此您删除自己的滚动视图并使用

<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

您还可以查看documentation了解详情。

此解决方案更容易，因为您不需要自己处理任何事情，但如果您想在其中加入scrollView，我认为您会遇到一些问题。

2-我曾经创建过一个实际上与你的解决方案类似的组件，但它曾经用键盘高度值翻译整个视图，这个解决方案对我来说也很完美。

我在此链接中创建了一个完整的示例，您可以检查它，组件名称为AvoidKeyboard。

https://repl.it/repls/LinearSardonicDolphin

Answer 2

我找到了一个不涉及黑客动画变化的解决方案。

当键盘打开时，我决定在ScrollView底部添加一些与InputAccessory高度相对应的边距。然后我在键盘关闭时删除此边距。它看起来像这样：

import KeyboardListener from 'react-native-keyboard-listener';

...
render() [
  <ScrollView 
    key={1} 
    style={{ marginBottom: this.state.scrollViewMarginBottom }} 
  />,
  <InputAccessory key={2} onLayout={...} />,
  <KeyboardListener
    key={3}
    onWillShow={() => this.setState({ scrollViewMarginBottom: inputAccessoryHeight });
    onWillHide={() => this.setState({ scrollViewMarginBottom: 0 })
  />
]

Answer 3

我在IOS中遇到了很多键盘问题。没有KeyboardSpacer，react-native-keyboard-aware-scroll-view和更多的包解决了它。

最近我发现了react-native-keyboard-manager，它解决了我所有的问题，没有一行代码，也有模态和更多（我与作者没有任何关系，但是这个包保存了我一天）。给它一个改变。

Answer 4

我面临着同样的问题，在网上阅读时，我发现了以下解决方案

对于Android

转到您的AndroidManifest.xml并添加android:windowSoftInputMode="adjustPan"

<activity
        android:name=".MainActivity"
        android:windowSoftInputMode="adjustPan">
        .....
</activity>

对于IOS

只需遵循此存储库中的说明即可。 https://github.com/douglasjunior/react-native-keyboard-manager。

希望这会有所帮助。 ：）