如何让React Native应用监听HID蓝牙设备（二维码扫描器）

1. 蓝牙权限问题 #

不需要在应用中申请蓝牙权限。因为这款扫描器是作为HID设备和系统配对连接的，本质是模拟键盘输入，系统已经接管了它的连接管理，你的应用只是接收它的输入数据，和蓝牙权限完全无关。

2. 监听逻辑判断与实现 #

你的判断是对的：只需要在进入目标页面时启动监听，离开页面时停止即可，这样能避免不必要的资源占用，也不会干扰其他页面的正常操作。

具体实现方案 #

HID扫描器的核心是模拟键盘输入，所以我们可以通过监听输入框内容变化来获取扫描数据，这里推荐用隐藏输入框的方案，简单通用：

代码示例（React Native页面）

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

const ScannerPage = () => {
  const [scanResult, setScanResult] = useState('');
  const hiddenInputRef = useRef(null);

  // 页面挂载时，让隐藏输入框获取焦点，准备接收扫描数据
  useEffect(() => {
    hiddenInputRef.current?.focus();

    // 页面卸载时，移除焦点并清理
    return () => {
      hiddenInputRef.current?.blur();
    };
  }, []);

  // 处理扫描到的内容
  const handleInputChange = (text) => {
    // 大部分扫描器会在内容末尾加换行符\n作为扫描结束标记
    if (text.endsWith('\n')) {
      const cleanData = text.trim();
      setScanResult(cleanData);
      // 这里写你的业务逻辑，比如解析二维码、提交数据等
      console.log('扫描完成：', cleanData);
      // 清空输入框，准备下一次扫描
      hiddenInputRef.current?.clear();
    } else {
      setScanResult(text);
    }
  };

  return (
    <View style={styles.pageContainer}>
      {/* 隐藏的输入框，用来接收扫描器的模拟键盘输入 */}
      <TextInput
        ref={hiddenInputRef}
        style={styles.hiddenInput}
        onChangeText={handleInputChange}
        value={scanResult}
        autoFocus={false}
        keyboardType="default"
      />

      {/* 展示扫描结果 */}
      <View style={styles.resultArea}>
        <Text style={styles.resultText}>扫描结果：</Text>
        <Text style={styles.resultContent}>{scanResult}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  pageContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  hiddenInput: {
    position: 'absolute',
    width: 0,
    height: 0,
    opacity: 0,
  },
  resultArea: {
    marginTop: 30,
    width: '100%',
    padding: 15,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  resultText: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 8,
  },
  resultContent: {
    fontSize: 14,
    color: '#333',
  },
});

export default ScannerPage;

Android额外适配（可选）

如果在Android上遇到焦点不稳定或者需要监听全局按键的情况，可以用react-native-keyevent库：

1. 安装依赖：

npm install react-native-keyevent --save

2. 配置AndroidManifest.xml（添加权限）：

<uses-permission android:name="android.permission.INTERNET" />

3. 页面内监听全局按键：

import KeyEvent from 'react-native-keyevent';

// 在useEffect里添加
useEffect(() => {
  let tempText = '';
  const keyDownListener = KeyEvent.onKeyDownListener((event) => {
    const key = event.key;
    if (key === 'Enter') {
      // 扫描结束，处理数据
      setScanResult(tempText);
      console.log('扫描内容：', tempText);
      tempText = '';
    } else {
      tempText += key;
    }
  });

  return () => {
    keyDownListener.remove();
  };
}, []);

iOS注意事项

iOS上HID设备的输入会自动路由到当前焦点的输入框，所以用隐藏输入框的方案完全够用，不需要额外配置。如果有特殊需求，可以通过原生扩展监听UIKeyCommand，但一般场景下没必要。

内容的提问来源于stack exchange，提问作者123dumoh