Question

KeyboardAvoidingView中有一个“behavior”属性，例如：

import { KeyboardAvoidingView } from 'react-native';

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

可以将其选为以下三种选择之一：'height'，'position'或'padding'。没有解释差异in the documentation。它只是说不需要设置属性，并有一个注释：

注意：Android和iOS都与此道具互动不同。如果没有任何行为道具，Android可能表现得更好，而iOS则相反。

这些设置应该有什么影响？

Answer 1

我同意这里缺少文档令人沮丧。如果您深入研究KeyboardAvoidingView的源代码，则会在behavior周围找到一个切换：https://github.com/facebook/react-native/blob/92073d4a71d50a1ed80cf9cb063a6144fcc8cf19/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L157

似乎正在发生以下情况：

height

返回<View>的样式会尝试为视图设置静态高度，该高度是屏幕高度，或者是存在键盘时屏幕高度减去键盘的高度。

position

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

padding

如果存在键盘，则返回一个<View>，其中将paddingBottom样式应用于键盘的高度。

鉴于可用的任意选项，看起来在使用KeyboardAvoidingView时，您应该反复试验，并检查两种设备的预期结果。从理论上讲，这三个选项都应该起作用，但是正如文档所说，设备类型之间存在细微差别。

我认为，应该废弃此组件，而使用辅助功能，这些功能会随着时间的推移返回键盘高度，因此您可以直接根据键盘可见性应用自己的样式提示。

Answer 2

允许我逐一浏览道具属性的这些属性。

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

“填充”：键盘弹出后，组件将移至较高位置。建议在屏幕上没有太多组件的情况下使用填充，否则布局可能会在该组件可能与其上方的组件重叠的地方中断（请注意：其上方的组件也会向上移动。.但为了进行调整）视图可能存在重叠）。注意：这里，两件事：TextInput和组件可能会重叠。
“位置”：包含TextInput的整个View将被上移，并且上面的某些组件可能在屏幕顶部不可用/不可见，即从屏幕顶部被切断是上限。
“高度”：通常与keyboardVerticalOffset一起使用。弹出键盘后，可用于调整屏幕视图的大小。可能会导致重叠，从而尝试调整屏幕大小。在这种情况下，如果发生重叠，则TextInput将在其上方的组件上方重叠。

Answer 3

对于ios，您可以对padding道具使用behavior。像这样

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

对于Android，最好不要使用behavior道具。

KeyboardAvoidingView中的高度与位置与填充“行为”

3 个答案: