简介
之前开发中经常会遇到，弹出键盘输入内容时，键盘遮挡布局（特别实在登陆界面）。在react-native0.31版本开始，官方提供了解决方案，KeyboardAvoidingView。
原理
与之前网上很多开发者提供的方法类似，通过改变View的height或者padding，让需要显示的布局内容向上偏移，给键盘的显示留出空间。
但是官方此次多处一种方案，使用绝对布局布局，通过设置vposition来偏移VIew的位置
属性和方法
KeyboardAvoidingView的特殊的属性和方法很少
属性
| 属性名 | 介绍 |
|---|---|
| behavior | 有3个选项height', 'position', 'padding'，分别通过高度、绝对布局的position、paddingBottom来控制布局的偏移 |
| contentContainerStyle | 如果设定behavior值为'position'，则会生成一个绝对布局的View作为内容容器。此属性用于指定此内容容器的样式。 |
| keyboardVerticalOffset | 有时候应用离屏幕顶部还有一些距离（比如状态栏等），利用此属性来补偿修正这段距离 |
方法
| 方法名 | 说明 |
|---|---|
| relativeKeyboardHeight | |
| onKeyboardChange | 键盘状态改变时回调的方法 |
| onLayout(event) |
实例
<View>
<KeyboardAvoidingView
style={styles.keyboardView}
behavior={'height'}
>
<TextInput
placeholder={'please type some code'}
style={styles.textInput}
/>
</KeyboardAvoidingView>
</View>
QQ20180309-112806.gif
网友评论