Android平台上TextInput的onKeyPress方法

Question

我一直试图在react-native的TextInput中捕获键盘事件。

通过阅读组件文档 (https://facebook.github.io/react-native/docs/textinput.html)，我注意到了完全符合我的需要的onKeyPress函数。但它仅被标记为ios专用。我还没有发现任何有关android的解决方法，除了这个问题 (https://github.com/facebook/react-native/issues/1882)，但这个问题已经不活跃了几个月...

我需要做的是在按下Backspace时调用特定的方法，但现在看起来只能在ios上实现...

你们知道任何解决方法吗？

提前感谢 :)

- Guillaume Munsch

Answer 1

onKeyPress 现在支持安卓系统。

从版本 v0.55.2 开始（提交记录）

请注意，硬件键盘输入在安卓系统上不被支持，只有软键盘输入。

也就是说，如果你在安卓模拟器上使用计算机键盘进行测试，这些输入是无法处理的。因此，请使用鼠标按下模拟器上的软键盘。

- Gianfranco P.

---

谢谢你提供这个信息！非常好的回答 :) - Guillaume Munsch

Answer 2

我也遇到了这个问题。我可以告诉你我是怎么做的。虽然不太优雅，但是可以解决这个问题，直到它在Android上实现为止。

在Android中，你可以在Activity中处理键事件。此外，你还可以将事件发送到JavaScript。这就是你需要的一切。

在js文件中（例如componentDidMount），添加监听器。

DeviceEventEmitter.addListener('onKeyPressed', yourFunction)

在你的MainActivity中添加类似以下代码。

public boolean onKeyUp(int keyCode, KeyEvent event) {
   WritableMap params;
   // params.put something
   // filter only Backspace events if you wish etc.
   reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                           .emit("onKeyPressed", params);
}

每次按键时都会发送。不要忘记删除监听器（例如在componentDidUnmount或者你不再需要它的时候）。另外，如果你有多个，请跟踪哪个正在聚焦，以免弄混。

希望能帮助到你。

- Martin

---

你如何获取reactContext？ - Guy Chen

在活动中，使用getReactNativeHost().getReactInstanceManager().getCurrentReactContext()。 - Martin

这仅适用于硬件键盘事件。当在屏幕键盘上按下退格键时，它不会触发我。 - chromakode

@Martin，你的代码行包含了无法识别的符号，请修复它。 <code>getReactNativeHost().getReactInstanceManager().getCurrentRea&zwnj;&#8203;ctContext()</code> - Sound Blaster

模拟器中无法触发退格键，但在真实设备上可以正常工作（已测试）。顺便说一下，这个包实现了这种方法 https://github.com/kevinejohn/react-native-keyevent - nazar kuliyev

Answer 3

你可以使用 TextInput 的 onChangeText，在提供给 onChangeText 的函数内部，你可以检查最新输入的文本是否比 TextInput 中之前的文本少一个字符。如果是这样，那么说明用户按下了退格键，你可以触发/调用你特定的方法。

 class SearchScreenBase extends Component {

  constructor(props) {
    super(props);
    this.state = { lastText: '',
    };
    // Bind callback methods to make `this` the correct context.
    this._onChange = this._onChange.bind(this);
   }
   _onChange(newText) {
      var oldText = this.state.lastText;
      if(newText.length === (oldText.length-1)){
         //INSERT TRIGGER FUNCTION HERE
      }
      this.setState({
               lastText: newText
      });
   }
   render() {
    return (
      <TextInput
        onChangeText = {this._onChange}
        editable = {true}
        maxLength = {40}
      />
    );
  }
}

它对我来说运作得非常好。

- Aavgeen singh

Answer 4

将此代码添加到您的MainActivity.java文件中。

import com.facebook.react.modules.core.DeviceEventManagerModule;
import android.view.KeyEvent;

...

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    getReactNativeHost().getReactInstanceManager().getCurrentReactContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("onKeyPressed", keyCode);
    return super.onKeyUp(keyCode, event);
}

现在这将返回与按下的按钮相对应的keyCode。 将此添加到您的组件中以侦听发射的keyCode，例如，我正在componentWillMount中添加监听器。

componentWillMount = () => {
    this.keyPressedListener = DeviceEventEmitter.addListener('onKeyPressed', yourFunction);
}

根据您的要求处理yourFunction，并在之后记得删除监听器。

- Utpal Singh