React-Native中Keyboard模块

你的名字 2022-05-16 10:04 157阅读 0赞

Keyboard组件是用来控制键盘的事件

#### 用法 ####

Keyboard 模块允许react代码能够进行监听原生本地的键盘事件，也能够进行改变键盘的状态，比如能够dismissing键盘，如下代码所示：

import React, { Component } from 'react';
    import { Keyboard, TextInput } from 'react-native';
    
    class Example extends Component { 
      componentDidMount () {
      // 添加监听事件
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
      }
    
      componentWillUnmount () {
      // 移除监听事件
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
      }
      // 键盘显示时响应方法
      _keyboardDidShow () {
        alert('Keyboard Shown');
      }
      // 键盘消失响应方法
      _keyboardDidHide () {
        alert('Keyboard Hidden');
      }
    
      render() {
        return (
          <TextInput
            onSubmitEditing={Keyboard.dismiss}
          />
        );
      }
    }

### 可使用的方法 ###

### `addListener()` ###

static addListener(eventName, callback)

`addListener` 函数将JavaScript函数关联到标识本机原生键盘的通知事件，这个方法将会返回一个监听事件的引用。  
方法中需要两个参数，分别是本地原生事件名称和需要绑定的方法名称，可以选择使用的事件名称如下所示

*  `keyboardWillShow`
 *  `keyboardDidShow`
 *  `keyboardWillHide`
 *  `keyboardDidHide`
 *  `keyboardWillChangeFrame`
 *  `keyboardDidChangeFrame`

值得注意的是，如果在安卓AndroidManifest.xml文件中设置键盘模式的时候，设置`android:windowSoftInputMode` 为`adjustResize` 或者 `adjustNothing`, 则仅仅`keyboardDidShow` 和 `keyboardDidHide` 事件将能够使用的在安卓上面，`keyboardWillShow` 和`keyboardWillHide`一般是不可用的在安卓上面，因为他们没有本地原生事件对应的操作

--------------------

### `removeListener()` ###

static removeListener(eventName, callback)

这个方法是用来移除指定的监听器，其中包括两个参数，分别是要移除监听器的名称和回调方法，前者是指定的字符串，后者是一个方法

--------------------

### `removeAllListeners()` ###

static removeAllListeners(eventName)

这个方法用来移除特定事件类型的所有监听器，参数仍然是一个监听器类型中的字符串

--------------------

### `dismiss()` ###

static dismiss()

这个方法用来移除正在活动中的键盘，将其隐藏起来