Question

我在Expo应用程序上使用KeyboardAvoidingView遇到了困难。我想满足以下要求：

打开键盘时，视图应向上滚动，以便用户始终看到输入。这就是KeyboardAvoidingView的目的。
打开键盘后，用户应该能够在整个视图中滚动。
不应有任何奇怪的图形故障。
它应该可以在iOS和Android上运行。

我尝试了100种不同的解决方案，但没有得到令人满意的结果。在使用Expo时，由于无法更改AndroidManifest，因此我无法使用https://github.com/APSL/react-native-keyboard-aware-scroll-view。

使用KeyboardAvoidingView，我发现最好的解决方案是在iOS上将行为=“填充”，而在Android上则完全没有行为。但是，仍然存在一个问题：打开键盘时，用户可以滚动浏览的空间有限。因此，当视图是一个包含大量输入的长格式时，如果不关闭键盘，滚动并再次打开键盘，用户将无法进入窗体的底部。

我还有一个问题，就是键盘在输入焦点对准后立即打开，但是我想保留一些额外的空间，因为我的输入有一些填充。使用keyboardVerticalOffset属性对此没有影响。

在阅读了数十篇有关该主题的文章之后，似乎没有人真正了解KeyboardAvoidingViews的工作原理以及如何有效地使用它们。即使在官方的React Native文档上，也提到“ Android和iOS都与此道具[（behavior）]交互的方式有所不同。当完全不提供行为道具时，Android可能表现得更好，而iOS则相反”，就像他们没有真的不了解这个属性是什么。

有人知道如何使用KeyboardAvoidingView以及如何使用它来满足4个要求吗？

提前感谢您的帮助！

Answer 1

我们正在使用这个

<KeyboardAwareScrollView  keyboardShouldPersistTaps={'always'}
        style={{flex:1}}
        showsVerticalScrollIndicator={false}>
    {/* Your code goes here*/}
</KeyboardAwareScrollView>

我们没有遇到这四个问题

Answer 2

您是否尝试过react-native-keyboard-spacer的KeyboardSpacer？我将其与react-native-elements一起使用，效果很好！您唯一需要注意的是要使用滚动视图时。只要确保您将其放置在外面即可！

Answer 3

我不了解 KeyboardAvoidingView

的问题

它对我有用：

<KeyboardAvoidingView style={{flex:1}} behavior="padding" enabled>
  your ui ....
</KeyboardAvoidingView>

Answer 4

我有类似的问题。显示键盘时，滚动无法正常工作。我使用以下解决方案解决了这个问题：我在App.json中添加了它：

"androidStatusBar": {
  "backgroundColor": "#172a53"
}

这使状态栏固定在屏幕顶部。神奇地显示了键盘时，滚动开始正常工作（不知道为什么）。现在，为了使StatusBar像原来一样工作，我将其添加到App.js（您的根文件）文件中

<StatusBar translucent />

希望这可以解决您的问题。谢谢

打开键盘时滚动浏览视图（React Native / Expo）

4 个答案: