PDA手持设备的红外扫描识别开发

场景介绍

纯h5的项目,做的识别二维码功能有缺陷,就是响应时间太慢,进而升所以要求安卓app来做二维码识别。主要是实现pda设备的红外扫描功能

思路分析

h5的功能是,input输入框来承接设备扫描结果。即将红外扫描当作一种输入识别功能。导致的问题是,识别效率需要两三。纯h5的效率本来在移动端效率能接受,但是迁移到PDA手持设备上时,识别时间大概有4-5秒响应时间。

会议上不知道是谁向领导提交了一个RN打包成原生安卓apk安装到PDA手持设备的方案。于是又一次到了前端发挥余热的时候,(这不纯纯浪费我摸鱼学习的时间嘛)。遂掏出了我的RN的祖传老项目进行了开发。

欻欻欻,一会儿功夫就成功改造了祖传RN老项目。此处就不泄露公司代码了。贴个样式吧

大概功能就是出入库,扫描商品和货架号,识别并提交,并且设置中可以配置服务器接口和操作员可选。

识别和监听PDA的红外扫描功能,直接上代码有注释

安卓原生代码

在android文件夹 android/app/src/main/java/com/xxx(项目名)/xxModule.java

typescript 复制代码
// xxModule.java
package com.xxx;

import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.modules.core.DeviceEventManagerModule;

public class xxModule extends ReactContextBaseJavaModule {
    private static final String BROADCAST_ACTION = "xxxx"; // 用于指定广播的 action 字符串,这里设置为你要监听的广播code
  

    private final ReactApplicationContext reactContext;

    public xxxnModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext; //React Native 上下文,提供了与 JavaScript 端通信的接口

        // 注册广播接收器
        registerReceiver();// 注册一个广播接收器,监听扫描仪的广播事件
    }

    @Override
    public String getName() {
        return "xxModule";
    }

    @ReactMethod
    public void myMethod(String message) {// JavaScript 调用的方法,这里定义了一个方法,用于在 Java 控制台打印接收到的消息
        System.out.println("Received message: " + message);
    }

    // 注册广播接收器
    private void registerReceiver() {
        BroadcastReceiver receiver = new BroadcastReceiver() {
            @Override
            public void onReceive(Context context, Intent intent) {

                // 收到广播后发送事件到 JavaScript
                reactContext
                        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                        .emit("onBroadcastReceived", intent.getStringExtra("SCAN_BARCODE1"));
            }
        };

        IntentFilter filter = new IntentFilter(BROADCAST_ACTION);
        reactContext.registerReceiver(receiver, filter);
    }

    // 发送事件到 JavaScript
    private void sendEvent(String data) {
        reactContext
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("onBroadcastReceived", data);
    }
}

解释如下:

1、xxModule创建是为了创造一个广播监听器。监听的是广播的BROADCAST_ACTIONcode监听

2、registerReceiver是注册广播接收器

3、sendEvent发送事件,并且约定onBroadcastReceived作为承接data的字段名。

监听模块创建好了之后,因为在android/app/src/main/java/com/xxx(项目名)/MainApplication.java中

kotlin 复制代码
//...
 protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
         // packages.add(new Package()); //添加我的红外监听模块
          return packages;
        }
 //...

因为这里是以package的形式来添加autoLinked的,所以还需要创建包类 在android/app/src/main/java/com/xxx(项目名)/MyCustomerPackage.java

java 复制代码
// MyCustomerPackage.java
package com.xxx;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.xxx.xxModule;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyCustomerPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new xxModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

}

以上代码的意思:

1、包名定义模块,并引入xxxModule.java的类

最后在MainApplication.java中

ss

typescript 复制代码
    // ...
    import com.xxx.MyCustomerPackage;
    // ...
 
   @Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      packages.add(new MyCustomerPackage()); //添加我的红外监听模块
      return packages;
    }

  // ...

这样原生的底层监听广播事件,就完成了,重新打包并发布。

那么就是在react中开始监听这个扫描事件喽,作为一个前端,这就是随便写了啊

因为是祖传原始项目,react还是用的class写法,版本在16.18.0之前的版本,新版酌情修改:

直接上js代码,使用方法

javascript 复制代码
//...
import { NativeEventEmitter, NativeModules } from 'react-native';
const { xxScanModule } = NativeModules;
const xxEventEmitter = new NativeEventEmitter(xxScanModule);
//...

componentDidMount() {
    // 添加事件监听器
    this.xxListener = xxxEventEmitter.addListener(
      'onBroadcastReceived',
      this.handlexxxResult
    );
  }

  componentWillUnmount() {
    // 移除事件监听器
    this.xxListener.remove();
  }

以上代码,生命周期中添加监听和移除监听

1、onBroadcastReceived这个一定要跟自己添加的返回值匹配

2、handlexxxResult在这个方法里面就可以处理监听器返回的结果。

大概内容就是这样,很久没写博客了,心血来潮,纪念一下吧,喜欢的点赞!

相关推荐
半桔25 分钟前
【Linux手册】从接口到管理:Linux文件系统的核心操作指南
android·java·linux·开发语言·面试·系统架构
xiaopengbc44 分钟前
Android解压工具,ZArchiver,RAR for Android,iZip,The Unarchiver,解压专家
android
Digitally44 分钟前
5种使用USB数据线将文件从安卓设备传输到电脑的方法
android
爬虫程序猿9 小时前
利用爬虫按关键字搜索淘宝商品实战指南
android·爬虫
顾北川_野9 小时前
Android ttyS2无法打开该如何配置 + ttyS0和ttyS1可以
android·fpga开发
wzj_what_why_how12 小时前
Android网络层架构:统一错误处理的问题分析到解决方案与设计实现
android·架构
千里马学框架12 小时前
User手机上如何抓取界面的布局uiautomatorviewer
android·智能手机·aosp·uiautomator·布局抓取·user版本
朝阳3912 小时前
ReactNative【实战系列教程】我的小红书 6 -- 购物(含商品搜索、商品分类、商品列表)
react native
阿巴~阿巴~13 小时前
操作系统核心技术剖析:从Android驱动模型到鸿蒙微内核的国产化实践
android·华为·harmonyos
hsx66614 小时前
使用 MaterialShapeDrawable 自定义各种形状的 View
android