React Native 键盘Keyboard API使用笔记

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zqc1106100200/article/details/81357622

最近在开发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 ?
                        <TouchableOpacity style={styles.blank} onPress={() => 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})
    }

 

展开阅读全文

没有更多推荐了,返回首页