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

Question

我在我的Expo应用程序中使用KeyboardAvoidingView遇到了困难。我希望达到以下要求：

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

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

使用KeyboardAvoidingView，我发现最好的解决方案是在iOS上将behavior设置为"padding"，而在Android上则不设置任何behavior。然而，仍然存在一个问题：当键盘打开时，用户可以滚动的空间是有限的。因此，当一个视图是一个具有大量输入项的长表单时，用户不能在不关闭键盘、滚动并再次打开键盘的情况下滚动到表单底部。

我也有一个问题，就是当焦点在输入框上时键盘会立即弹出，但是我想留一些额外的空间因为我的输入框有一些填充。使用 keyboardVerticalOffset 属性对此没有任何影响。

阅读了数十篇关于这个主题的文章后，似乎没有人真正理解 KeyboardAvoidingView 如何工作以及如何有效地使用它们。即使在官方的 React Native 文档中，也提到 "Android 和 iOS 在处理此属性[(behavior)] 时表现不同。Android 可能在根本没有 behavior 属性时表现更好，而 iOS 则相反"，就像他们并不真正理解这个属性。

有没有人理解如何使用 KeyboardAvoidingView 并满足这 4 个要求？

- Arnaud

---

我也在使用Expo，你已经找到解决方案了吗？ - troy_achilies

嘿，你是怎么解决的？ - Thakur Karthik

Answer 1

我们正在使用这个

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

而且我们没有遇到这四个问题中的任何一个

- Kranthi

---

Arnaud 表示由于 Expo 的限制，他无法使用 KeyboardAwareScrollView。 - basbase

这太好了。当我在这里包含FlatList时，我当然会收到一个疯狂的警告。难道我们可以手动使用map而不是使用FlatList吗？ - CodeFinity

Answer 2

在 IOS 中，我不需要使用 KeyboardAvoidingView，我只需使用 automaticallyAdjustKeyboardInsets。

<ScrollView
      automaticallyAdjustKeyboardInsets={true}
      contentContainerStyle={{
        flex: 1
      }}
    >
...
</ScrollView>

- Steven Koch

Answer 3

您尝试过来自react-native-keyboard-spacer的KeyboardSpacer吗？我在使用react-native-elements时使用它，效果非常好！唯一需要注意的是当您想使用scrollview时。只需确保将 <KeyboardSpacer>放置在其外部即可！

- Gaspar Teixeira

Answer 4

我不明白关于 KeyboardAvoidingView 的问题在哪里。

对我来说，它可以正常工作：

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

- Idan