React Native调用navigation.navigate()时BLE设备断开的解决咨询

核心问题分析 #

蓝牙连接中断本质是BLE连接实例或监听逻辑被意外销毁，常见诱因：

• BLE Context的Provider挂载在单个页面组件内，页面跳转时Provider被卸载，导致整个Context失效
• 页面组件卸载时，未保留BLE连接实例，且错误地在组件清理逻辑中断开连接或移除监听
• react-native-navigation的页面切换机制可能导致旧页面组件被卸载，连带销毁BLE相关的订阅或连接实例

具体解决方案 #

1. 将BLE Context的Provider提升到全局根组件 #

把Provider放在App最顶层，确保所有页面共享同一个Context实例，不会随页面跳转被销毁。

示例代码结构：

// App.js
import { NavigationContainer } from '@react-navigation/native';
import { BleProvider } from './contexts/BleContext';
import RootNavigator from './navigation/RootNavigator';

export default function App() {
  return (
    <BleProvider>
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </BleProvider>
  );
}

2. 在Context中持久化BLE连接实例 #

在BLE Context内部维护全局的bleManager实例和connectedDevice引用，所有操作都通过Context方法触发，不在页面组件中创建或销毁这些实例。

示例Context实现：

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

const BleContext = createContext();

export function BleProvider({ children }) {
  const [bleManager] = useState(new BleManager());
  const [connectedDevice, setConnectedDevice] = useState(null);
  const [bleData, setBleData] = useState(null);

  // 连接设备方法
  const connectToDevice = async (deviceId) => {
    try {
      const device = await bleManager.connectToDevice(deviceId);
      await device.discoverAllServicesAndCharacteristics();
      setConnectedDevice(device);
      startDataListening(device);
    } catch (error) {
      console.error('连接失败:', error);
    }
  };

  // 全局BLE数据监听
  const startDataListening = (device) => {
    device.monitorCharacteristicForService(
      '你的服务UUID',
      '你的特征UUID',
      (error, characteristic) => {
        if (error) {
          console.error('监听错误:', error);
          return;
        }
        setBleData(characteristic.value);
      }
    );
  };

  // 仅在App全局卸载时清理连接
  useEffect(() => {
    return () => {
      if (connectedDevice) {
        bleManager.cancelDeviceConnection(connectedDevice.id);
      }
      bleManager.destroy();
    };
  }, [bleManager, connectedDevice]);

  const value = {
    bleManager,
    connectedDevice,
    bleData,
    connectToDevice,
  };

  return <BleContext.Provider value={value}>{children}</BleContext.Provider>;
}

export function useBle() {
  return useContext(BleContext);
}

3. 页面组件仅负责数据展示与操作触发 #

页面组件通过useBle()获取Context中的数据和方法，不在页面内部创建BLE监听逻辑，避免页面卸载时监听被移除。

页面示例：

// screens/DeviceScreen.js
import React from 'react';
import { View, Text } from 'react-native';
import { useBle } from '../contexts/BleContext';

export default function DeviceScreen() {
  const { bleData } = useBle();

  return (
    <View>
      <Text>当前BLE数据: {bleData}</Text>
    </View>
  );
}

4. 配置react-native-navigation页面生命周期 #

如果使用的是react-native-navigation（非@react-navigation），设置页面栈保留旧页面实例，避免组件被卸载：

// 导航配置示例
Navigation.setRoot({
  root: {
    stack: {
      options: {
        stackPresentation: 'preserve', // 保留页面实例
      },
      children: [
        {
          component: {
            name: 'HomeScreen',
          },
        },
      ],
    },
  },
});

5. 手动管理BLE监听的暂停/恢复 #

若需要在页面离开时暂时停止监听，可在Context中添加控制方法，而非直接断开连接：

// 在BleContext中补充
const [isListening, setIsListening] = useState(true);

const pauseListening = () => setIsListening(false);
const resumeListening = () => {
  setIsListening(true);
  connectedDevice && startDataListening(connectedDevice);
};

// 修改监听逻辑
const startDataListening = (device) => {
  if (!isListening) return;
  device.monitorCharacteristicForService(
    '你的服务UUID',
    '你的特征UUID',
    (error, characteristic) => {
      if (error || !isListening) return;
      setBleData(characteristic.value);
    }
  );
};

关键注意事项 #

• 始终保持BleManager为全局单例，不要在页面组件中创建实例
• 所有BLE操作（连接、监听、断开）统一通过Context方法执行
• 配置对应平台的BLE后台权限：iOS需开启bluetooth-central权限，Android需申请ACCESS_FINE_LOCATION权限

内容的提问来源于stack exchange，提问作者Ethan Stacey