时间戳

首页 > 解决方案 > 来自物理条码扫描器的 React Native 捕获事件

react-native - 来自物理条码扫描器的 React Native 捕获事件

问题描述

我正在尝试在 React Native 应用程序中实现条形码扫描仪（此型号是 Generalscan M100BT）。目前可以正常扫描到 TextiInput，但软键盘正在使用中，无法隐藏它。所以我们试图从扫描仪捕获事件，但我无法确定我应该查看哪个事件，也无法确定哪个模块生成它，或者一旦我确定哪个事件有它，如何获取 EAN 代码。我正在使用 Snoopy 查看 Bridge 并试图缩小查看范围，这里有一些 logcat 输出，我认为可能是我正在寻找的事件，但我不太确定

12-30 14:06:45.193  7608  7686 I ReactNativeJS: N->JS : RCTEventEmitter.receiveEvent([1149,"topLayout",{"target":1149,"layout":{"y":458,"height":0,"width":360,"x":0}}]) *
12-30 14:06:45.195  7608  7686 I ReactNativeJS: N->JS : RCTEventEmitter.receiveEvent([1155,"topLayout",{"target":1155,"layout":{"y":0,"height":561,"width":360,"x":0}}]) *
12-30 14:06:45.196  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1383]]) *
12-30 14:06:45.197  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1384]]) *
12-30 14:06:45.198  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1380,1382]]) *
12-30 14:06:45.357  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1386]]) *
12-30 14:06:45.358  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1390]]) *
12-30 14:06:45.361  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onAnimatedValueUpdate",{"value":2,"tag":3}]) *
12-30 14:07:17.609  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onHWKeyEvent",{"tag":879,"eventType":"focus"}]) *
12-30 14:07:17.964  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onHWKeyEvent",{"tag":879,"eventType":"select"}]) *
12-30 14:07:17.978  7608  7686 I ReactNativeJS: N->JS : RCTEventEmitter.receiveEvent([879,"topClick",{}]) *
12-30 14:07:18.072  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1394]]) *
12-30 14:07:18.081  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onAnimatedValueUpdate",{"value":1,"tag":3}]) *
12-30 14:07:18.083  7608  7686 I ReactNativeJS: N->JS : <callback for NativeAnimatedModule.startAnimatingNode>([{"finished":true}]) *
12-30 14:07:18.095  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1399]]) *
12-30 14:07:18.250  7608  7686 I ReactNativeJS: N->JS : JSTimers.callTimers([[1400]]) *
12-30 14:07:18.295  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onHWKeyEvent",{"tag":879,"eventType":"blur"}]) *
12-30 14:07:18.296  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onHWKeyEvent",{"tag":13,"eventType":"focus"}]) *
12-30 14:07:18.305  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onAnimatedValueUpdate",{"value":1,"tag":3}]) *
12-30 14:08:24.954  7608  7686 I ReactNativeJS: N->JS : RCTDeviceEventEmitter.emit(["onHWKeyEvent",{"tag":13,"eventType":"select"}]) *
12-30 14:08:24.969  7608  7686 I ReactNativeJS: N->JS : RCTEventEmitter.receiveEvent([13,"topClick",{}]) *

除此之外，我正在尝试使用以下方法捕获事件：

const nativeEventEmitter = new NativeEventEmitter(NativeModules.{BarcodeScannerModule});
nativeEventEmitter.addListener('onHWKeyEvent', (data) => console.log("Barcode Scanner Event: ", data));

但我不知道在哪里寻找与此代码一起使用的 {BarcodeScannerModule} 模块名称，

更新

这是接收扫描条形码的 TextInput 的代码，在 onSubmitEditing 上它使用事件：

  <TextInput style={{ color: "white", width: 0, height: 0 }}
    onFocus={() => NativeModules.KeyboardModule.hideKeyboard()}
    autoFocus={true}
    onChange={this.handleTextChange}
    ref={(input) => { this.scanInput = input }}
    caretHidden={true}
    onSubmitEditing={(event) => { this.findEanData(event.nativeEvent.text); }}
  />

任何帮助是极大的赞赏！

标签： react-nativeeventsevent-handlingreact-native-bridge

解决方案

我正在关闭这个问题，因为发现我可以使用 react-native-keyevent 捕获事件，这不起作用，因为设备和扫描仪之间存在蓝牙问题。

推荐阅读