键盘中的高度与位置与填充避免查看"行为"



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>对象。

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

注意:当我们在 ScrollView 中包装屏幕时,请确保将 ScrollView 包装

对于 ios,您可以使用paddingbehavior道具。 喜欢这个

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

对于安卓来说,没有behavior道具会更好。

相关内容

  • 没有找到相关文章

最新更新