React Native 点击软键盘消失按钮后，点击按钮需要点击

作者: 雨飞飞雨 | 来源:发表于2017-09-11 17:26 被阅读100次

React Native 点击软键盘消失按钮后，点击按钮需要点击
Element 按钮点击后需要立即失去焦点
【前端案例】12 - 案例：发送短信倒计时
小程序点击按钮后修改颜色(样式)
12-撰写按钮点击动画
react-native 关闭软键盘需要点击两次才能触发事件解决
UIView动画
React Native-弹框存在TextInput，输入框有焦
「React Native」防重复点击
vue中button取消键盘监听

经过试验发现点击软键盘消失按钮后，或者点击屏幕其他的地方，软键盘消失，点击按钮却需要两次的原因是，焦点还在原来的TextInput上面。

解决的办法就是，监听软键盘的消失方法，然后在消失方法里面，再一次调用软键盘消失方法：

import { Keyboard, TextInput } from 'react-native'; 
componentWillMount () {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
}
componentWillUnmount() {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
}
_keyboardDidShow () {

}
_keyboardDidHide () {
         dismissKeyboard();
}

参考文章：
键盘遮挡问题处理;
ReactNative之键盘Keyboard的弹出与消失示例;