react-native-SerialPort 串口插件使用及配置

news2024/11/18 7:43:07

一、git地址和环境版本

（1）Git地址：https://github.com/Marcello168/react-native-SerialPort
（2）node版本：14 +
（3）react-native版本：0.72

二、环境配置

（1）先在package.json中 'dependencies' 对象下添加 "react-native-serial-port": "github:Marcello168/react-native-SerialPort"，如下图所示：
在这里插入图片描述
（2）更改 npm 配置 解决依赖包下载不下来的问题，更改命令：git config --global url.“https://”.insteadOf ssh://git@，然后执行 npm i 脚本

（3）下载完成后对 android 目录下的 settings.gradle 添加下面两行代码

include ':react-native-serial-port'
project(':react-native-serial-port').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-serial-port/android')

图例：在这里插入图片描述
（4）在android 目录下的build.gradle 文件中的repositories对象中添加一行代码

maven { url 'https://jitpack.io' }

图例：
在这里插入图片描述

（5）在 android\app 目录下的build.gradle 中的 dependencies 对象中添加下面一行代码

implementation project(path: ':react-native-serial-port')

图例：
在这里插入图片描述
（6）在android\app\src\main中的AndroidManifest.xml文件更改android:allowBackup 配置项将其改为true
（7）在node_modules\react-native-serial-port\android中的build.gradle文件更改参数将dependencies对象下原来的compile 改为implementation （用来解决gradle版本问题导致的编译错误）
如图所示：
旧的：
在这里插入图片描述
改后的：

到这基本配置都配完了。

三、串口工具的使用

（1）封装一个RNSerialPortManager.js

import RNSerialPort from 'react-native-serial-port';
import {DeviceEventEmitter} from 'react-native';
let instance = null;

export default class RNSerialPortManager {
  constructor() {
    if (!instance) {
      instance = this;
      // DeviceEventEmitter.addListener(
      //   'onSerialPortRecevieData',
      //   this.onSerialPortRecevieData,
      //   this,
      // );
      //监听接收串口开关的状态
      DeviceEventEmitter.addListener(
        'onSerialPortOpenStatus',
        this.onSerialPortOpenStatus,
        this,
      );
      console.log('Newinstance');
    }
    return instance;
  }

  /***
   * 类方法
   */
  static ShareInstance() {
    let singleton = new RNSerialPortManager();
    return singleton;
  }

  //监听串口的状态
  onSerialPortOpenStatus(status) {
    // alert(status);
    console.log('onSerialPortOpenStatus', status);
    //处理逻辑
  }

  // 监听串口回传数据
  onSerialPortRecevieData(receiveData) {
    console.log('onSerialPortRecevieData', receiveData);
    // 处理接收的数据
  }

  //获取设备列表
  getDeviceList() {
    return new Promise((resolve, reject) => {
      RNSerialPort.getAllDevicesPath(result => {
        console.log('result: ', result);
        resolve(result);
      });
    });
  }
  //获取返回数据
  getReceive() {
    return new Promise((resolve, reject) => {
      RNSerialPort.getReceive().then(result => {
        console.log('getReceive: ', result);
        resolve(result);
      });
    });
  }

  // 打开虚拟串口
  // 测试 /dev/ttyS4 9600
  openSerialPort(portStr, Baudrates) {
    RNSerialPort.openSerialPort(portStr, Baudrates);
  }

  // 关闭虚拟串口
  closSerialPort() {
    console.log('组件销毁关闭串口')
    console.log('RNSerialPort: ', RNSerialPort);
    RNSerialPort.close();
  }
  // 移除监听
  removeReceiveCallback() {
    console.log('移除监听')
    RNSerialPort.removeReceiveCallback();
  }

  //发送数据
  writeByteData(data) {
    console.log('发送数据 >>>>> writeByteData: ', data);
    RNSerialPort.sendByteData(data);
  }
}

export const SerialPortManager = RNSerialPortManager.ShareInstance();

（2）调用：

import { DeviceEventEmitter } from 'react-native';

import RNSerialPortManager, {
  SerialPortManager,
} from '@/utils/RNSerialPortManager';

componentDidMount () {
    // 打开串口
    this._openSerialPort();
    
    // 发送指令
    SerialPortManager.writeByteData(HexString2Bytes('8C000001008D')); 
    
    // 设置监听
    DeviceEventEmitter.addListener('onSerialPortRecevieData', msg => {
      console.log('onSerialPortRecevieData>>>>>>>>>>>msg: ', msg);
      // 处理该数据
    });
  }
  // 销毁组件
  componentWillUnmount () {
    SerialPortManager.closSerialPort();
    SerialPortManager.removeReceiveCallback();
  }
  // 打开串口
  _openSerialPort () {
    SerialPortManager.openSerialPort('/dev/ttyS1', '9600'); // 打开虚拟串口
  }