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

Question

KeyboardAvoidingView中有一个"behavior"属性,例如:

import { KeyboardAvoidingView } from 'react-native';

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

它可以被挑选出来,成为三个选项之一:'height','position'或'padding'.文档中没有解释差异.它只是说不需要设置属性,并有一个注释:

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

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

Answer 1

我同意这里缺乏文档令人沮丧。如果你深入研究 的源代码KeyboardAvoidingView，你会发现一个开关behavior：https://github.com/facebook/react-native/blob/92073d4a71d50a1ed80cf9cb063a6144fcc8cf19/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L1

看起来正在发生以下情况：

height

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

position

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

padding

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

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

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

Answer 2

请允许我一一回顾一下 prop 行为的这些属性。

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

1. "padding"：<TextInput>一旦键盘弹出，组件就会移动到更高的位置。当屏幕上的组件不多时，建议使用 padding，否则布局可能会中断，组件可能会<TextInput>与其上面的组件重叠（注意，上面的组件也会向上移动，但为了调整 Views）可能有重叠）。另请注意， 和<TextInput>组件可能会重叠。
2. “position”：包含的整个视图<TextInput>将向上移动，并且上面的某些组件可能在屏幕顶部不可用或不可见，即它们将从屏幕顶部所在的顶部被切断上限。
3. “height”：一般与 一起使用keyboardVerticalOffset。它用于在键盘弹出后调整屏幕视图的大小。在尝试调整屏幕大小时，它也可能会导致重叠。在这里，<TextInput>如果发生重叠， 将会重叠在其上方的组件上方。

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