KeyboardAvoidingView中的height、position和padding在“behavior”中的区别是什么？

Question

在KeyboardAvoidingView中有一个"behavior"属性，例如：

import { KeyboardAvoidingView } from 'react-native';

<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    ... your UI ...
</KeyboardAvoidingView>

它可选为三个选项之一：'height'，'position'或'padding'。 在文档中没有解释这种差异。它只是说不需要设置该属性，并附有以下注释：

注意：Android和iOS的交互方式不同。如果根本不给出behavior属性，则Android的行为可能更好，而iOS则相反。

这些设置应该产生什么效果？

- A.com

---

我手头没有任何设置来进行实验...但是从快速浏览几页提到它的页面来看，它似乎涉及如何解释keyboardVerticalOffset数字。 *(此外，属性未按字母顺序列出，因此behavior属性紧随该属性之后可能具有意义)*。您可以尝试更改简单布局的参数并调整该数字以查看效果。 - HostileFork says dont trust SE

他们的文档非常糟糕。 - Green

Answer 1

我认同这里缺乏文档的情况令人沮丧。如果你深入查看KeyboardAvoidingView的源代码，你会发现在behavior周围有一个开关：https://github.com/facebook/react-native/blob/92073d4a71d50a1ed80cf9cb063a6144fcc8cf19/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L157 它似乎是如下所示：

一个<View>带有样式返回，试图将视图的静态高度设置为屏幕高度或者键盘存在时的屏幕高度减去键盘高度。

返回一个嵌套的<View>，其中外部View应用了你的样式，内部View应用了一个bottom样式，试图在键盘存在时匹配键盘的高度。

返回一个单独的<View>，如果键盘存在，则应用一个paddingBottom样式到键盘的高度。

考虑到可用的任意选项，使用KeyboardAvoidingView时应进行试错，并检查所需结果在两个设备上的表现。理论上这三个选项都应该有效，但文档中指出不同设备类型之间存在一些细微差别。

我认为，应该放弃使用此组件，转而使用帮助程序函数返回键盘高度随时间变化的值，以便您可以直接根据键盘可见性应用自己的样式想法。

- Matt Way

Answer 2

让我逐一介绍prop行为的这些属性。

我正在考虑<TextInput>对象，我们会调用它的键盘。

1. "padding"：当键盘弹出时，<TextInput>组件会上移。建议在屏幕上没有太多组件时使用填充，否则布局可能会破坏，<TextInput>组件可能会与其上面的组件重叠（请注意，其上方的组件也会向上移动，但为了调整视图，可能会发生重叠）。同时请注意，<TextInput>和其他组件可能会重叠。
2. "position"：包含<TextInput>的整个视图将向上移动，有可能导致一些位于其上方的组件不可用或不可见，即它们将从屏幕顶部被截断，其中屏幕顶部是上限。
3. "height"：通常与keyboardVerticalOffset一起使用。它用于在键盘弹出时调整屏幕视图的大小。这也可能导致重叠，试图调整屏幕大小。在这种情况下，<TextInput>会在重叠时覆盖其上面的组件。

注意：当我们将屏幕包裹在ScrollView中时，请确保使用<KeyboardAvoidingView style={{flex:1}} ...>将ScrollView包裹起来，其中flex:1应该用于占据整个组件，因为ScrollView正在包裹组件

- ckaus

Answer 3

对于iOS，您可以将 padding 应用于 behavior 属性。就像这样

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

对于Android来说，最好不要使用behavior属性。

- Daniel Zheng

---

这个答案已经过时了。根据最新的React Native文档，建议在iOS和Android上都设置行为。 - luke77