键盘AvoidingView中有一个"行为"属性,例如:

import { KeyboardAvoidingView } from 'react-native';

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

它可以 Select 为三个选项之一:'height''position''padding'.这种差异没有得到in the documentation%的解释.它只说不需要设置属性,并且有一个注释:

Note: Android and iOS both interact with this prop differently. Android may behave better when given no behavior prop at all, whereas iOS is the opposite.

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

推荐答案

我同意,这里缺乏文件令人沮丧.如果你深入研究KeyboardAvoidingView的源代码,你会发现behavior:https://github.com/facebook/react-native/blob/92073d4a71d50a1ed80cf9cb063a6144fcc8cf19/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L157附近有一个switch

看起来发生了以下情况:

height

返回一个带有样式的<View>,该样式试图将静态高度设置为视图的屏幕高度,或者当有键盘时,屏幕高度减go 键盘.

position

返回嵌套的<View>,其中外部视图应用了您的样式,而内部视图应用了bottom样式,当键盘存在时,该样式将try 匹配键盘高度.

padding

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


考虑到可用的任意选项,看起来在使用KeyboardAvoidingView时,你应该进行反复试验,并判断这两种设备是否达到预期效果.理论上,这三种 Select 都应该有效,但正如文件所说,设备类型之间存在一些细微差别.

在我看来,这个组件应该被废弃,取而代之的是辅助功能,随着时间的推移,它会返回键盘高度,所以你可以直接根据键盘可见性应用你自己的风格 idea .

React-native相关问答推荐

无法解析 com.google.gms:google-services:4.3.15

Appcenter codepush 返回请求被阻止

将值从一个 js 文件传递​​到 react native 中的另一个 js 文件:react native

React中类似于 React Native 中的 FlatList

react-native alignSelf 中心并拉伸到 maxWidth?

带有 SafeAreaView-wrapper 的 react-native Modal 不起作用

使用带有 react-native 的 WebView 设置用户代理

如何在 React Native For Android 中删除启动画面后的白屏

error TS2300: Duplicate identifier 'RequestInfo'

有没有办法改变 IOS 标题上react-navigation 的默认后退按钮 colored颜色 ?

No such property: ABI for class: org.gradle.api.tasks.OutputFile

在 Android React Native 应用程序中正确使用 Intl

Console.error:no permission handler detected

如何在 Text 中围绕 Text 包裹 TouchableOpacity?

在 react-native 中设置动态 'initialRouteName'

如何在样式组件之外获取主题?

如何隐藏 React Native NavigationBar

为react-native TextInput 设置边框

react-native:多色文本视图

如何为 TouchableOpacity 组件创建禁用样式?