首页 » App开发 » React Native 输入框被键盘遮挡解决办法

React Native 输入框被键盘遮挡解决办法

相信每一个移动开发者都会碰到输入框被键盘遮挡的状况,当然也有各种各样的解决方案

React Native 的版本目前已经到了0.34,对于这个被遮挡的问题,当然已经有很多轮子。到了0.29版本时,React Native更新了KeyboardAvoidingView组件用来解决这个问题。

KeyboardAvoidingView 可以将子元素的位置根据KeyBoard的高度进行自动调整,有三种behavior分别是'height', 'position', 'padding',看了下源码,大致是一个普通的View监听了Keyboard的几个事件然后进行相应的高度调整。

padding模式下,KeyboardAvoidingView会在键盘弹出时添加一个paddingBottom:keybordHeight的样式,这样子就可以保证子元素肯定不会被键盘遮挡(- -!)

position模式下,会加一个bottom:keybordHeight的样式,与padding的区别是bottom表现出来的形式是整体上移。

height模式下,顾名思义就是设置高度,但是这个属性下,键盘缩回后元素并不能回到原来的位置,所以慎用。

其实这几种模式都比较局限,无论padding还是bottom在有多个TextInput子元素的情况下都不能很好的进行位置控制。但是大致思路并没错,笔者正在开发中的项目中使用的是react-native-keyboard-aware-scroll-view,是ScrollView的子类,理论上来说直接替换即可,但是在测试过程中偶尔有发现这个KeyboardAwareScrollView乱滚动的状况,准备再观察一阵,看是否和环境有关以及看看有没更好的解决方案。