如何在React-Native中实现摄像头读取数字序列并提取前3位？

1. 基于Tesseract OCR的封装库 #

• 可以使用react-native-tesseract-ocr，这是React Native生态中成熟的OCR工具，支持摄像头实时识别或静态图片识别。
• 配置时指定仅识别数字（通过参数--psm 10 -c tessedit_char_whitelist=0123456789），过滤非数字内容，提升识别精准度。
• 识别完成后直接截取结果的前3位即可，比如const firstThreeDigits = recognizedText.replace(/[^0-9]/g, '').slice(0, 3)。
• 注意事项：需在iOS/Android项目中配置摄像头权限，Android端需下载Tesseract的数字训练数据（可选择轻量化的数字专用训练集）。

2. Google ML Kit文本识别 #

• 利用Google ML Kit的文本识别能力，通过react-native-google-mlkit-text-recognition这类封装库在React Native中调用。
• ML Kit对印刷体数字的识别准确率较高，支持实时摄像头流处理。
• 识别后遍历文本结果块，过滤出纯数字序列再截取前3位，无需额外配置字符白名单即可精准定位数字。

3. 原生模块自定义封装（针对Java嵌入需求） #

• 若需自行开发原生模块嵌入React Native，Android端可基于ML Kit或Tesseract Android Tools实现：
  1. 创建React Native原生模块，向JS层暴露识别方法，可选择在原生层直接处理摄像头预览帧，或接收JS传递的帧数据。
  2. 原生方法中调用ML Kit文本识别接口，提取数字序列后截取前3位，通过Promise返回给JS层。
  3. 示例Android端核心代码片段：

  @ReactMethod
  public void extractFirstThreeDigits(Promise promise) {
      TextRecognizer recognizer = TextRecognition.getClient(TextRecognizerOptions.DEFAULT_OPTIONS);
      // 将摄像头帧转换为InputImage，此处省略帧获取逻辑
      InputImage inputImage = InputImage.fromBitmap(cameraFrameBitmap, 0);
      
      recognizer.process(inputImage)
          .addOnSuccessListener(textResult -> {
              String pureDigits = textResult.getText().replaceAll("[^0-9]", "");
              String result = pureDigits.length() >= 3 ? pureDigits.substring(0, 3) : pureDigits;
              promise.resolve(result);
          })
          .addOnFailureListener(error -> promise.reject("RECOGNIZE_ERROR", error.getMessage()));
  }
  

入门方向建议 #

• 优先尝试现成的RN封装库（Tesseract或ML Kit），无需从零开发原生代码，快速验证识别效果。
• 先从静态图片识别测试入手，确认数字提取逻辑可行后，再接入实时摄像头流处理。
• 测试时保证印刷体数字清晰、光线充足，可适当调整摄像头对焦参数提升识别稳定性。

内容的提问来源于stack exchange，提问作者Eduardo Avila