React Native中如何通过react-native-ble-plx保持蓝牙设备全应用连接

你的核心问题是页面切换时组件卸载导致BLE连接实例被销毁，以下是几个可行的解决办法：

1. 用全局状态管理持有BLE实例 #

把BLE设备实例、连接状态放到全局状态（比如React Context、Redux、Zustand）里，不要存在单个页面的组件state中：

• 创建一个BLE上下文，在App根组件外层包裹，所有页面都能共享这个上下文里的实例：

// BLEContext.js
import React, { createContext, useContext, useState } from 'react';
import { BleManager } from 'react-native-ble-plx';

const BLEContext = createContext();

export const BLEProvider = ({ children }) => {
  const [manager] = useState(new BleManager());
  const [connectedDevice, setConnectedDevice] = useState(null);

  // 连接设备方法
  const connectDevice = async (deviceId) => {
    try {
      const device = await manager.connectToDevice(deviceId);
      await device.discoverAllServicesAndCharacteristics();
      setConnectedDevice(device);
      // 监听断开，自动重连
      device.onDisconnected(() => connectDevice(deviceId));
      return device;
    } catch (error) {
      console.error('连接失败:', error);
      throw error;
    }
  };

  // 获取数据方法
  const fetchDeviceData = async (serviceUUID, charUUID) => {
    if (!connectedDevice) throw new Error('未连接设备');
    const characteristic = await connectedDevice.readCharacteristicForService(
      serviceUUID,
      charUUID
    );
    return characteristic.value;
  };

  return (
    <BLEContext.Provider value={{ manager, connectedDevice, connectDevice, fetchDeviceData }}>
      {children}
    </BLEContext.Provider>
  );
};

export const useBLE = () => useContext(BLEContext);

• 在App.js中包裹：

import { BLEProvider } from './BLEContext';

export default function App() {
  return (
    <BLEProvider>
      {/* 你的导航组件和页面 */}
    </BLEProvider>
  );
}

• 任意页面使用：

import { useBLE } from './BLEContext';

function SomePage() {
  const { connectedDevice, fetchDeviceData } = useBLE();

  const handleGetData = async () => {
    try {
      const data = await fetchDeviceData('你的服务UUID', '你的特征UUID');
      // 处理数据
    } catch (error) {
      console.error('获取数据失败:', error);
    }
  };

  return <Button title="获取数据" onPress={handleGetData} />;
}

2. 封装单例BLE服务 #

创建一个独立的单例类，把所有BLE逻辑放在里面，确保整个APP只有一个服务实例：

// BLEService.js
import { BleManager } from 'react-native-ble-plx';

class BLEService {
  constructor() {
    if (!BLEService.instance) {
      this.manager = new BleManager();
      this.connectedDevice = null;
      BLEService.instance = this;
    }
    return BLEService.instance;
  }

  async connectDevice(deviceId) {
    try {
      const device = await this.manager.connectToDevice(deviceId);
      await device.discoverAllServicesAndCharacteristics();
      this.connectedDevice = device;
      // 监听断开，自动重连
      device.onDisconnected(() => this.connectDevice(deviceId));
      return device;
    } catch (error) {
      console.error('连接失败:', error);
      throw error;
    }
  }

  async fetchData(serviceUUID, charUUID) {
    if (!this.connectedDevice) throw new Error('未连接设备');
    const characteristic = await this.connectedDevice.readCharacteristicForService(
      serviceUUID,
      charUUID
    );
    return characteristic.value;
  }
}

const instance = new BLEService();
Object.freeze(instance);

export default instance;

• 页面中调用：

import BLEService from './BLEService';

function AnotherPage() {
  const handleGetData = async () => {
    try {
      const data = await BLEService.fetchData('服务UUID', '特征UUID');
      // 处理数据
    } catch (error) {
      console.error('获取数据失败:', error);
    }
  };

  return <Button title="获取数据" onPress={handleGetData} />;
}

3. 关键注意事项 #

• 不要在页面的useEffect中直接创建BLE实例或添加监听，避免组件卸载时销毁连接
• 确保BLE服务/全局状态在APP生命周期内始终存在（不要随页面卸载而销毁）
• 监听设备断开事件，添加自动重连逻辑，提升连接稳定性

内容的提问来源于stack exchange，提问作者Satya Ganesh