KeyboardAvoidingView中有一个"behavior"属性,例如:
import { KeyboardAvoidingView } from 'react-native';
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
... your UI ...
</KeyboardAvoidingView>
它可以被选为三个选项之一:'height'
、'position'
或'padding'
。 文档中未解释差异。 它所说的只是不需要设置属性,并且有一个注释:
注意:Android 和 iOS 都以不同的方式与此道具交互。当完全没有行为道具时,Android可能会表现得更好,而iOS则相反。
这些设置应该有什么效果?
我同意这里缺乏文档令人沮丧。如果你深入研究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
时,您应该进行反复试验,并检查两个设备以获得所需的结果。从理论上讲,所有三个选项都应该有效,但正如文档所说,设备类型之间存在一些细微差别。
在我看来,这个组件应该被废弃,取而代之的是随着时间的推移会返回键盘高度的辅助函数,因此您可以根据键盘可见性直接应用自己的风格想法。
请允许我一一介绍道具行为的这些属性。
我正在考虑调用键盘的<TextInput>
对象。
-
"填充">:键盘弹出后,
<TextInput>
组件将转到更高的位置。建议在屏幕上没有很多组件时使用填充,否则布局可能会中断,<TextInput>
组件可能与其上方的组件重叠(请注意,它上面的组件也会向上移动,但为了调整视图可能会有重叠)。另请注意,<TextInput>
和组件可能会重叠。 -
"位置">:包含
<TextInput>
的整个视图将被向上移动,并且上面的某些组件可能不可用或在屏幕顶部不可见,即它们将从屏幕顶部的顶部切断是上限。 -
"高度">:一般与
keyboardVerticalOffset
一起使用。它用于在键盘弹出后调整屏幕视图的大小。在尝试调整屏幕大小时,它也可能导致重叠。在这里,如果发生重叠,<TextInput>
将重叠在其上方的组件上方重叠。
注意:当我们在 ScrollView 中包装屏幕时,请确保将 ScrollView 包装
对于 ios,您可以使用padding
来behavior
道具。 喜欢这个
<KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
...
</KeyboardAvoidingView>
对于安卓来说,没有behavior
道具会更好。