KeyboardAvoidingView避免键盘遮挡布局

简介

之前开发中经常会遇到,弹出键盘输入内容时,键盘遮挡布局(特别实在登陆界面)。在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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,217评论 25 708
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,229评论 4 61
  • 最近在研究spring boot,学习了一段时间决定把心得放上来.我自己项目是用到了以下一些东西: spring ...
    会灰的大飞狼阅读 553评论 0 6
  • 舜能大孝,因为他自以为自己是世间大不孝之子,不孝到了父亲都要取自己性命的地步,所以更加反省自己,更加孝敬父亲。瞽叟...
    华杉2009阅读 1,008评论 0 3