我如何在 React Native 中收听键盘输入

Question

我有一台 Honeywell 扫描仪，可以在扫描条形码时输出文本。我可以将它用作文本输入的 "keyboard"，这非常方便，因为我不需要连接任何东西。但它的缺点是必须集中输入并因此显示移动设备的虚拟键盘，这对于我正在从事的项目来说是不可接受的。

有什么方法可以在不聚焦输入的情况下获取扫描值？我相信监听 keyPress 事件或类似事件是可行的方法，将输入的值存储在 textInput 以外的变量中。

如果有更好的方法来实现这一点，我会洗耳恭听！

Answer 1

我知道react-native有一个键盘模块可以控制keyboard events

The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.

import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';

class Example extends Component {
  componentWillMount () {
    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}
      />
    );
  }
}

Answer 2

好的大家，找到了一种方法来做到这一点又不会太疯狂。这不是最优雅的解决方案，但它确实满足了我的需要，并且不会给代码添加太多内容。

import { Keyboard, TextInput } from 'react-native';

...

<TextInput
  autoFocus
  onFocus={() => Keyboard.dismiss()} />

这里的游戏名称是autoFocus和onFocus={() => Keyboard.dismiss()} />。

现在我将按照@MattAft 的建议使用 https://www.npmjs.com/package/react-native-keyevent 来监听按键（不幸的是，这个包不会给我实际的扫描仪输入。但是，它会触发 keyDown 事件）以集中注意力扫描仪读取内容时的 TextInput。

更新几天前，当我们有时间重构这个组件时，一位同事帮了我一些忙，我们发现 react-native-keyevent 包上有一个名为 onKeyMultipleListener 的监听器，它不仅监听多个同时按键，但也捕获整个输入，这正是我们在这里需要的。

我如何在 React Native 中收听键盘输入

How do I listen to keyboard input in React Native

keyboard-events

reactjs

react-native