解决iOS中弹出键盘遮挡输入框的问题, 需要在输入框获取焦点时向上移动一定的距离. 有一个比较简单的方法
首先要将输入框的父组件改为scrollView, 这样就可以根据需要进行移动,并设置ref, 方便控制scrollView滚动
在输入框的onFocus方法中添加如下代码, 就可以实现输入框随键盘弹出而移动
/**
* this.refs.scrollView : 根据scrollView组件的ref获取该组件
* findNodeHandle : import {findNodeHandle} from 'react-native';
* inputRef : 输入框的ref字符串
* distance : 输入框距离键盘顶部的间距
*/
setTimeout(()=> {
let scrollResponder = this.refs.scrollView.getScrollResponder();
scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
findNodeHandle(inputRef, distance, true);
}, 100);
- 当输入框失去焦点时, 需要再次调用第二步的方法将输入框移动回底部 (最好是将输入框移动回原位置,目前我还没找到方法). 但是不是在onBlur方法中调用. 因为界面有多个输入框的话, 切换输入框会出现问题. 最好添加键盘事件监听, 当键盘隐藏时才调整输入框的位置
/**
* Keyboard : import {Keyboard} from 'react-native';
*/
componentWillMount() {
this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide',this._keyboardWillHideHandler.bind(this));
}
componentWillUnmount() {
this.keyboardWillHideListener.remove();
}
/**
* this.state.input : 在输入框onFocus方法中将当前选中输入框的ref保存到state中,
*/
_keyboardWillHideHandler() {
this.state.inputRef && this.avoidKeyboardCover(this.state.inputRef,80);
}
这样就解决了键盘遮挡输入框的问题. 虽然有一点瑕疵, 输入框不能回到原来的位置, 但是已经可以满足基本需要, 比起使用第三方组件要轻便很多, 是一个不错的选择
