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

【问题标题】：Scroll through the view when keyboard is open (React Native / Expo)键盘打开时滚动视图（React Native / Expo）
【发布时间】：2019-02-08 21:13:51
【问题描述】：

我很难在我的 Expo 应用程序上使用 KeyboardAvoidingView。我想满足以下要求：

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

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

使用 KeyboardAvoidingView，我发现最好的解决方案是在 iOS 上放置 behavior = "padding"，而在 Android 上根本没有任何行为。但是，仍然存在一个问题：当键盘打开时，用户可以滚动的空间是有限的。因此，当视图是一个包含大量输入的长表单时，如果不关闭键盘、滚动然后再次打开键盘，用户就无法到达表单底部。

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

在阅读了数十篇有关该主题的帖子后，似乎没有人真正了解 KeyboardAvoidingViews 的工作原理以及如何有效地使用它们。即使在官方的 React Native 文档中，也提到“Android 和 iOS 都以不同的方式与这个 prop [(behavior)] 交互。当根本没有给定行为 prop 时，Android 可能表现得更好，而 iOS 则相反”，就像他们没有'不太明白这个属性是什么。

是否有人了解如何使用 KeyboardAvoidingView 以及如何使用它才能满足 4 个要求？

【问题讨论】：

我也在用expo，你找到解决方案了吗？
嘿，你是怎么解决的？

标签： react-native keyboard expo

【解决方案1】：

我们正在使用这个

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

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

【讨论】：

Arnaud 表示由于 Expo 限制，他无法使用 KeyboardAwareScrollView
这很棒。当然，当我在这里包含FlatList 时，我会收到一个疯狂的警告。是否可以手动执行map 而不是使用FlatList，是吗？

【解决方案2】：

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

【讨论】：

【解决方案3】：

我不明白 KeyboardAvoidingView

的问题

这对我有用：

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

【讨论】：