React Native 键盘Keyboard API使用笔记

最近在开发react-native的ios版本app的时候遇到一个问题：在app的登录界面，在antd-mobile-rn的TextInput输入密码时，弹出的键盘会遮盖住登录按钮，点击空白处键盘无法隐藏，于是研究了react native的keyboard包，在此做个笔记。

keyboard api中包含了几个函数：

1、addListener(eventName, callback)

addListener(eventName: KeyboardEventName, callback: KeyboardEventListener) {
    invariant(false, 'Dummy method used for documentation');
}

这个函数用来加载一个指定事件的事件监听器，根据api中的注释，函数中的 eventName 可以是如下值：

• keyboardWillShow：软键盘将要显示
• keyboardDidShow：软键盘显示完毕
• keyboardWillHide：软键盘将要收起
• keyboardDidHide：软键盘收起完毕
• keyboardWillChangeFrame：软件盘的 frame 将要改变
• keyboardDidChangeFrame：软件盘的 frame 改变完毕

2、removeListener(eventName, callback)

removeListener(eventName: KeyboardEventName, callback: Function) {
    invariant(false, 'Dummy method used for documentation');
}

这个函数用来放置在componentWillUnmount()函数中，用来释放一个特定的键盘事件监听器

3、removeAllListener(eventName)

removeAllListeners(eventName: KeyboardEventName) {
    invariant(false, 'Dummy method used for documentation');
}

这个函数用来释放一个指定键盘事件的所有事件监听器。

4、dissmiss()

dismiss() {
    invariant(false, 'Dummy method used for documentation');
}

调用该方法会使操作系统收起软键盘

 

在解决遇到的问题时，在整个视图中加入了一个透明的可点击TouchableOpacity，悬浮覆盖在整个视图中

{this.state.showBlank ?
                         this.onBlankClick()}/> : null}

onBlankClick() {
        Keyboard.dismiss();
        this.setState({showBlank: false})
}

点击该透明视图时，调用dismiss方法，隐藏系统键盘及透明视图

分别添加两个listener监听键盘打开和关闭时间，并操作透明视图的显示及隐藏

componentWillMount() {
    //监听键盘弹出事件
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow',
            this.keyboardDidShowHandler.bind(this));
        //监听键盘隐藏事件
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',
            this.keyboardDidHideHandler.bind(this));
}

componentWillUnmount() {
        //卸载键盘弹出事件监听
        if (this.keyboardDidShowListener != null) {
            this.keyboardDidShowListener.remove();
        }
        //卸载键盘隐藏事件监听
        if (this.keyboardDidHideListener != null) {
            this.keyboardDidHideListener.remove();
        }
    }

    //键盘弹出事件响应
    keyboardDidShowHandler(event) {
        this.setState({showBlank: true})
    }

    //键盘隐藏事件响应
    keyboardDidHideHandler(event) {
        this.setState({showBlank: false})
    }