React Native 使用蓝牙热敏打印机打印小票出现Promise拒绝警告如何解决

警告消除方案 #

你遇到的TypeError:null is not an object (evaluating 'RNBLEPrinter.init')警告是蓝牙打印原生模块未正确初始化导致，按以下步骤排查修复：

• 确认运行平台：react-native-thermal-receipt-printer的BLEPrinter仅支持安卓系统，iOS无对应实现，iOS运行必然触发该报错，iOS需更换支持蓝牙打印的适配库或改用网口打印
• 安卓运行场景：先重新同步原生依赖，安卓端执行./gradlew clean后重新打包，确认模块已正确链接
• 提前申请蓝牙权限：安卓12及以上需要动态申请BLUETOOTH_SCAN、BLUETOOTH_CONNECT、ACCESS_FINE_LOCATION权限，权限未授予时调用init会导致模块初始化失败
• 所有异步方法加catch捕获，避免未处理的Promise rejection

现有代码可打印性说明 #

修复上述警告后现有代码依然无法正常打印，存在2个核心逻辑错误：

1. 连接打印机用的是BLEPrinter实例，打印时调用的是USBPrinter的打印方法，连接和打印实例不匹配
2. _connectPrinter函数定义语法错误，点击设备时会触发变量未定义报错

修复后完整代码 #

import React, { useState, useEffect } from "react";
import {
  USBPrinter,
  NetPrinter,
  BLEPrinter,
} from "react-native-thermal-receipt-printer";
import { View, Text, TouchableOpacity, StyleSheet, PermissionsAndroid, Platform } from "react-native";

function Print() {
  const [printers, setPrinters] = useState([]);
  const [currentPrinter, setCurrentPrinter] = useState();

  // 申请安卓蓝牙权限
  const requestBlePermission = async () => {
    if (Platform.OS !== 'android') return true;
    try {
      const granted = await PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        PermissionsAndroid.PERMISSIONS.BLUETOOTH_SCAN,
        PermissionsAndroid.PERMISSIONS.BLUETOOTH_CONNECT
      ]);
      return Object.values(granted).every(item => item === PermissionsAndroid.RESULTS.GRANTED);
    } catch (err) {
      console.warn(err);
      return false;
    }
  }

  useEffect(() => {
    const initBlePrinter = async () => {
      const hasPermission = await requestBlePermission();
      if (!hasPermission) {
        console.warn('缺少蓝牙权限无法使用打印功能');
        return;
      }
      try {
        await BLEPrinter.init();
        const deviceList = await BLEPrinter.getDeviceList();
        setPrinters(deviceList);
      } catch (e) {
        console.warn('蓝牙初始化失败', e);
      }
    }
    initBlePrinter();
  }, []);

  // 修复连接函数定义
  const _connectPrinter = async (printer) => {
    try {
      const res = await BLEPrinter.connectPrinter(printer.inner_mac_address);
      setCurrentPrinter(res);
    } catch (e) {
      console.warn('连接失败', e);
    }
  };

  const printTextTest = () => {
    // 改用BLEPrinter打印
    currentPrinter && BLEPrinter.printText("this is new print");
  };

  const printBillTest = () => {
    // 改用BLEPrinter打印
    currentPrinter && BLEPrinter.printBill("this is for bill testing");
  };

  return (
    <View style={styles.container}>
      {printers.map((printer) => (
        <TouchableOpacity
          key={printer.inner_mac_address}
          onPress={() => _connectPrinter(printer)}
          style={{padding: 10, borderBottomWidth: 1, borderBottomColor: '#eee'}}
        >
          <Text>{`设备名: ${printer.device_name}, MAC地址: ${printer.inner_mac_address}`}</Text>
        </TouchableOpacity>
      ))}
      <TouchableOpacity onPress={printTextTest} style={{marginTop: 20, padding: 10, backgroundColor: '#f0f0f0'}}>
        <Text>打印测试文本</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={printBillTest} style={{marginTop: 20, padding: 10, backgroundColor: '#f0f0f0'}}>
        <Text>打印测试小票</Text>
      </TouchableOpacity>
    </View>
  );
}
export default Print;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 20
  },
});

内容的提问来源于stack exchange，提问作者ar.saud