Question

我正在编写一个本机应用程序，需要在组件内部实现键盘事件。

我尝试使用以下代码但没有成功。

import { DeviceEventEmitter } from 'react-native';

export default class KeyEvent {
  static onKeyDownListener(cb) {
    KeyEvent.removeKeyDownListener();
    console.log('Key Down');
    this.listenerKeyDown = DeviceEventEmitter.addListener('onKeyDown', cb);
  }

  static removeKeyDownListener() {
    if (this.listenerKeyDown) {
      this.listenerKeyDown.remove();
    }
  }

  static onKeyUpListener(cb) {
    console.log('Key up');
    KeyEvent.removeKeyUpListener();
    this.listenerKeyUp = DeviceEventEmitter.addListener('onKeyUp', cb);
  }

  static removeKeyUpListener() {
    if (this.listenerKeyUp) {
      this.listenerKeyUp.remove();
    }
  }
}

调用componentDidMount函数相关组件，如下所示。

componentDidMount() {
    console.log('componentDidMount');
    // if you want to react to keyDown 
    KeyEvent.onKeyDownListener((keyCode) => {
      console.log(`Key code pressed: ${keyCode}`);
    });

    // if you want to react to keyUp 
    KeyEvent.onKeyUpListener((keyCode) => {
      console.log(`Key code pressed: ${keyCode}`);
    });
  }

  componentWillUnmount() {
      console.log('componentWillUnmount');
    // if you are listening to keyDown 
    KeyEvent.removeKeyDownListener();

     // if you are listening to keyUp 
    KeyEvent.removeKeyUpListener();
  }

任何人都可以帮我修复此问题或建议采用其他任何方式。我需要按下按钮，然后按下输入键。

Answer 1

根据本机文档的反应，您可以将以下事件附加到键盘。

keyboardWillShow
keyboardDidShow
keyboardWillHide
keyboardDidHide
keyboardWillChangeFrame
keyboardDidChangeFrame

因此，如果您想要按下按键事件，则需要将事件附加到输入字段，如下所示。

<TextInput
    onKeyPress={this.handleKeyDown}
    placeholder="Enter text here..."
/>

handleKeyDown: function(e) {
    if(e.nativeEvent.key == "Enter"){
        dismissKeyboard();
    }
},

React-native键盘事件

1 个答案: