解决react native在iOS平台键盘遮挡输入框的问题

解决iOS中弹出键盘遮挡输入框的问题, 需要在输入框获取焦点时向上移动一定的距离. 有一个比较简单的方法

1. 首先要将输入框的父组件改为scrollView, 这样就可以根据需要进行移动,并设置ref, 方便控制scrollView滚动

2. 在输入框的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);

3. 当输入框失去焦点时, 需要再次调用第二步的方法将输入框移动回底部 (最好是将输入框移动回原位置,目前我还没找到方法). 但是不是在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);
}

这样就解决了键盘遮挡输入框的问题. 虽然有一点瑕疵, 输入框不能回到原来的位置, 但是已经可以满足基本需要, 比起使用第三方组件要轻便很多, 是一个不错的选择