怎么解决RN TextInput 被键盘遮挡的问题 #39
Description
在0.28版rn中，如果textinput的位置在靠近底部的位置，在textinput获取焦点后，ios上弹出的键盘会遮住textinput，导致用户无法输入；android上弹出键盘时，整个界面会被网上顶，textinput不会被遮住。
在0.28中，解决ios上该问题的方式是利用 ScrollView contentInset 属性，监听键盘的弹出和隐藏事件(keyboardWillShow/keyboardWillHide)，获取键盘的高度，动态设置成 contentInset 的值。
将rn升级成0.33后，android和ios上都会出现TextInput 被键盘遮挡的问题，ios上原来的方式也不能解决此问题了。
在 ios 上，textinput 未获取焦点前：
获取焦点后：
textinput被键盘挡住了。android上有同样的问题。
解决这种情况的一种方式，监听键盘的弹出和隐藏事件，在ScrollView底部设置一个占位符组件，将占位符的高度设置成键盘的高度。
监听键盘事件：
this.keyboardShow = Platform.OS === 'ios' ?
Keyboard.addListener('keyboardWillShow',this.updateKeyboardSpace.bind(this)) : Keyboard.addListener('keyboardDidShow',this.updateKeyboardSpace.bind(this));
this.keyboardHide = Platform.OS === 'ios' ?
Keyboard.addListener('keyboardWillHide',this.resetKeyboardSpace.bind(this)) : Keyboard.addListener('keyboardDidHide',this.resetKeyboardSpace.bind(this));
在事件处理程序中，获取键盘高度：
updateKeyboardSpace(frames){
if(!frames.endCoordinates){
return;
}
let keyboardSpace = frames.endCoordinates.height;//获取键盘高度
this.setState({
keyboardSpace: keyboardSpace
})
}
最后将高度传递给占位符组件：
<ScrollView>
//其他元素
<KeyboardSpacer keyboardSpace={this.state.keyboardSpace}/>
</ScrollView>
KeyboardSpacer组件实现如下：
const styles = StyleSheet.create({
container: {
left: 0,
right: 0,
bottom: 0
}
});
export default class KeyboardSpacer extends Component {
constructor(){
super();
}
static propTypes = {
keyboardSpace: PropTypes.number
};
static defaultProps = {
keyboardSpace: 0
};
render() {
let {keyboardSpace} = this.props;
return (
<View style={[styles.container, { height: ~~keyboardSpace }]} />
);
}
}
效果如下：
这样子能解决部分场景，例如textInput的位置是靠近底部的。如果textinput框的位置是靠近页面上部的，那么textinput框会被顶上去，就会因超出ScrollView的视口范围而被“遮住”。
这时，就不能单纯的将键盘的高度给 KeyboardSpacer 了，而应该根据textinput在ScrollView视口的位置进行 KeyboardSpacer 高度的计算了。
在页面加载之后，能获取到 ScrollView的视口高度ViewportHeight，这个值是保持不变的。此外，也能拿到textinput距离ScrollViewd顶边的垂直距离InputY，这个值是固定的，不会随着页面的滚动而变化页面示意如下：
在界面滚动一定距离之后，页面示意如下：
红边表示此时ScrollView的顶边位置，虚线框表示textInput框的原位置，实体框表示textInput在页面滚动之后的位置。
页面滚动时，能获取到ScrollView已经滚动的偏移量 scrollY，此时，就能计算出此时 textInput 距离ScrollView视口底部的距离 InputToBottom:
InputToBottom = ViewportHeight - (InputY - scrollY + textInput的高度)
此时，应该根据InputToBottom与键盘高度的大小比较来设置 keyboardSpace：
keyboardHeight = frames.endCoordinates.height; //键盘高度
keyboardSpace = InputToBottom >= keyboardHeight ? 0 : keyboardHeight - InputToBottom;
在图示页面的布局中，还有一个底部元素，因而在计算 keyboardHeight 时，因考虑下实际情况是否需要减去底部元素的高度或者ScrollView的marginBottom值。