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

Question

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

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>，其中外部视图应用了您的样式，内部视图应用了bottom 样式，当键盘存在时尝试匹配键盘高度。

padding

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

---

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

在我看来，这个组件应该被废弃，取而代之的是随着时间的推移返回键盘高度的辅助函数，这样你就可以直接根据键盘可见性应用你自己的风格想法。

Answer 2

请允许我一一浏览这些属性的 prop 行为。

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

1. “padding”：键盘弹起后，组件会移到更高的位置。建议在屏幕上没有太多组件时使用填充，否则布局可能会中断，组件可能与其上方的组件重叠。（注意：它上面的组件也会向上移动..但是为了调整视图可能有重叠）。 注意：这里两件事：TextInput 和组件可能会重叠。
2. “位置”：包含 TextInput 的整个视图将向上移动，并且上面的某些组件可能在屏幕顶部不可用/不可见，即会从屏幕顶部截断是上限。
3. “高度”：一般与keyboardVerticalOffset一起使用。它用于在键盘弹出后调整屏幕视图的大小。还可能导致重叠以尝试调整屏幕大小。在这里，如果发生重叠，TextInput 将重叠在其上方的组件之上。

**注意：当我们将屏幕包裹在 ScrollView 中时，请确保使用 包裹 ScrollView，其中 flex:1 应该用于占据整个组件由于 ScrollView 正在包装组件 **

Answer 3

对于 ios，您可以使用 padding 到 behavior 属性。 像这样

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

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