React Native: 解决 iOS 13+ 蓝牙权限弹窗自动弹出问题

2025-04-25 11:09:54

iOS 13+ 蓝牙权限：如何阻止弹窗自动弹出？

刚上手在 React Native 里搞蓝牙开发？那你很可能也碰到了这个头疼的问题：在 iOS 13 及更高版本上，蓝牙权限请求弹窗总是不请自来，在你还没准备好的时候就跳出来了！特别是在你想做一个引导流程（onboarding flow），让用户在特定界面点击按钮后再弹出权限请求时，这个问题就更明显了。

明明在 Android 上一切正常，权限弹窗乖乖地听话，只有用户点击了“继续”按钮才会出现。可一到 iOS 13+，App 刚启动，引导页的第一屏刚出来，还没等你代码里负责请求权限的那部分跑起来呢，系统“Duang”一下就把蓝牙权限弹窗甩你脸上了。更让人迷惑的是，有时候日志里还显示蓝牙状态未知（Current Bluetooth state: Unknown），甚至报错（Error enabling Bluetooth: [BleError: Bluetooth state change failed]），但用户手动在设置里检查，蓝牙明明是开着的。

这到底是怎么回事？

问题根源：iOS 蓝牙机制的“锅”

这事儿还真不能全怪 react-native-ble-plx 或者你的代码逻辑。问题的核心在于 iOS 13 对蓝牙权限处理方式的改变，以及 BleManager (底层对应 iOS 的 CBCentralManager) 的初始化时机。

简单来说：

初始化即触发检查： 在 iOS 13+ 中，当你初始化 CBCentralManager（也就是 react-native-ble-plx 里的 BleManager 实例）时，系统就会开始检查 App 是否有蓝牙权限。
状态访问也触发： 不仅仅是初始化，当你第一次尝试访问蓝牙管理器的状态 (比如调用 manager.state() 或类似方法检查蓝牙是否开启时)，如果 App 此时还没有明确的权限状态（既没被允许也没被拒绝），系统为了确定状态，也会主动弹出权限请求对话框。

对比一下 Android，它通常允许你先初始化蓝牙管理器，只有在你真正执行需要权限的操作（比如开始扫描 startDeviceScan）或者显式调用权限请求 API 时，才会触发权限弹窗。

在你的代码里，问题很可能出在 BLEContext.js 文件中：

// BLEContext.js
// ...
const manager = bleManagerSingleton.getInstance(); // <--- (1) 可能在模块加载时就初始化了

// ...
useEffect(() => {
    if (manager) {
        console.log("Manager initialized, checking Bluetooth state...");
        checkBluetoothState(); // <--- (2) 在 manager 初始化后立即检查状态
    } else {
        console.error("BleManager is not available");
    }
}, [manager]);

const checkBluetoothState = useCallback(async () => {
    return enqueueOperation(async () => {
        const state = await manager.state(); // <--- (3) 这里访问了状态，触发 iOS 弹窗
        console.log("Current Bluetooth state:", state);
        // ... 后续可能尝试 enable()
    }, "Checking Bluetooth state...");
}, [manager, enqueueOperation]);

// ...

看到问题了吗？

BleManager 实例 (manager) 可能在你的 Context Provider 加载时，或者更早，在单例 (bleManagerSingleton) 文件被导入时就已经创建了。
useEffect 钩子检测到 manager 存在后，立即调用了 checkBluetoothState。
checkBluetoothState 内部调用了 manager.state()。

在 iOS 13+ 上，这个 manager.state() 调用，就像按下了那个提前弹出权限对话框的按钮。系统一看：“嘿，这 App 想知道蓝牙状态？我得先问问用户同不同意它用蓝牙啊！” —— 于是，弹窗就出来了，完全没等到你引导流程里的那个“继续”按钮被点击。

解决方案：把“遥控器”抢回来

知道了原因，解决起来就对症下药了。核心思路就是：推迟与 BleManager 的“亲密接触”，直到用户真正表达了使用蓝牙的意愿 （也就是点击那个按钮之后）。

这里提供两种主要方法：

方案一：延迟初始化 BleManager

最彻底的方法就是，别在一开始就创建 BleManager 实例。让它“懒加载”，只有在用户点击按钮、我们确实需要开始蓝牙操作时，才去创建它。

原理：
不在模块加载或 Context 初始化时创建 BleManager。将其创建过程移到实际需要它的函数调用链中，通常是在权限请求函数内部或之前。

实现步骤：

修改 BLEContext.js，不要立即获取实例：

移除顶层的 const manager = bleManagerSingleton.getInstance();。
使用 useState 或 useRef 来持有 BleManager 实例，初始值为 null。

// BLEContext.js
import React, { /*...,*/ useState, useRef /*...*/ } from "react";
import { BleManager } from 'react-native-ble-plx'; // 直接导入 BleManager 类

// ...
export const BluetoothConnectionProvider = ({ children }) => {
    // 使用 useState 或 useRef 来持有 manager 实例
    const [manager, setManager] = useState<BleManager | null>(null);
    // 或者 const managerRef = useRef<BleManager | null>(null); 并用 managerRef.current 访问

    // ... (其他 state 和 ref)

    // 创建一个初始化函数
    const initializeBleManager = useCallback(() => {
        // 确保只初始化一次
        if (!manager /* || !managerRef.current */) {
            console.log("Initializing BleManager...");
            const newManager = new BleManager();
            setManager(newManager);
            // 或者 managerRef.current = newManager;
            return newManager; // 返回新实例供立即使用
        }
        return manager; // /* || managerRef.current */
    }, [manager /* , managerRef */]);

    // ...

修改 requestPermissions 或调用它的地方 (handleEnableBluetooth)：

在调用 react-native-permissions 的 request 之前，或者在用户点击按钮后，先调用 initializeBleManager 来创建实例。

// BLEContext.js

// requestPermissions 现在需要 manager 实例，可以作为参数传入，或者确保它先被初始化
const requestPermissions = useCallback(async () => {
    // 注意：react-native-permissions 的 request 本身就会触发原生弹窗
    // 所以这里可以在请求前确保 manager 初始化了，但不需要用 manager 来触发弹窗

    // (根据你的逻辑决定是否在这里初始化，或者在调用 requestPermissions 之前初始化)
    // const currentManager = initializeBleManager(); // 如果需要 manager 实例做些什么

    if (Platform.OS === "ios") {
        try {
            // ... (请求 PERMISSIONS.IOS.BLUETOOTH_PERIPHERAL 等)
            const bluetoothPermission = await request(PERMISSIONS.IOS.BLUETOOTH_PERIPHERAL);
             console.log("iOS Bluetooth permission request result:", bluetoothPermission);
            // ... (处理其他权限和结果)

             if (bluetoothPermission === RESULTS.GRANTED /* && 其他权限也OK */) {
                // 权限拿到后，确保 manager 已经初始化
                initializeBleManager(); // 如果之前没初始化，现在是时候了
                return true;
             } else {
                console.error("iOS Bluetooth or Location permissions not granted");
                return false;
             }
        } catch (err) {
            console.warn(err);
            return false;
        }
    } else if (Platform.OS === 'android') {
       // ... Android 逻辑
    }
    return false; // 默认返回 false
}, [initializeBleManager /* 依赖项里加入 */]);

// 其他函数如 checkBluetoothState, startDeviceScan 等都需要在使用 manager 前
// 检查它是否为 null，或者确保 initializeBleManager 已经被调用过
const checkBluetoothState = useCallback(async () => {
    const currentManager = manager; // 或者 managerRef.current
    if (!currentManager) {
         console.log("checkBluetoothState: Manager not initialized yet.");
         return; // 或者抛出错误，或者先尝试初始化
    }
    return enqueueOperation(async () => {
        const state = await currentManager.state();
        console.log("Current Bluetooth state:", state);
        // ...
    }, "Checking Bluetooth state...");
}, [manager, /*...*/ enqueueOperation]);


 // BluetoothScreen.js

 const { requestPermissions, /* 如果需要手动初始化，也导出 initializeBleManager */ } = useBluetoothConnection();

 const handleEnableBluetooth = async () => {
    // 在这里可以确保初始化，然后再请求权限
    // 或者让 requestPermissions 内部处理初始化
    console.log("Requesting Bluetooth permission...");
    const granted = await requestPermissions(); // requestPermissions 内部或之前确保了初始化
    console.log("Bluetooth permission granted:", granted);
    if (granted) {
         // 权限通过后，可以安全地执行后续蓝牙操作了
         // 比如可以调用 checkBluetoothState (它内部会检查 manager 是否存在)
        navigation.navigate("Camera");
    } else {
        Alert.alert(/* ... */);
    }
};

// ...

调整依赖 manager 的 useEffect 和其他函数：
- 原先依赖 manager 的 useEffect（比如自动检查状态的那个）要么移除，要么修改逻辑，确保在 manager 初始化之后再执行，并且可能需要由其他事件（如权限获取成功）触发。
- 所有用到 manager 实例的地方 (如 startDeviceScan, connectToDevice 等)，都需要在使用前判断 manager 是否已创建 (不为 null)。

进阶技巧：

结合权限检查：可以在 App 启动时，先用 react-native-permissions 的 check 方法检查蓝牙权限状态。如果已经是 RESULTS.GRANTED，则可以立即初始化 BleManager；否则，等待用户触发 requestPermissions。

// BLEContext.js
import { check, PERMISSIONS, RESULTS } from "react-native-permissions";

useEffect(() => {
    const checkInitialPermission = async () => {
        if (Platform.OS === 'ios') {
            const initialStatus = await check(PERMISSIONS.IOS.BLUETOOTH_PERIPHERAL);
            if (initialStatus === RESULTS.GRANTED) {
                console.log("Bluetooth permission already granted on startup.");
                initializeBleManager(); // 已经有权限，可以提前初始化
            } else {
                 console.log("Bluetooth permission not granted on startup, will wait for user action.");
            }
        }
        // Android 可能不需要这个逻辑，或者检查其他权限
    };
    checkInitialPermission();
}, [initializeBleManager]); // 确保 initializeBleManager 稳定

方案二：推迟蓝牙状态检查（或其他交互）

如果觉得改动 BleManager 的初始化时机太麻烦，或者你的架构依赖于早期创建实例，那么可以采取稍微“温柔”一点的方法：保持 BleManager 实例早期创建，但严格控制对它的第一次“交互” 。

原理：
BleManager 实例可以创建，但避免在获取权限前调用任何可能触发系统权限检查的方法，尤其是 manager.state() 或 .enable()。将这些调用推迟到权限被授予之后。

实现步骤：

移除或修改自动状态检查的 useEffect：

找到 BLEContext.js 中那个依赖 manager 并调用 checkBluetoothState 的 useEffect。

// BLEContext.js - 定位到这个 useEffect
useEffect(() => {
    if (manager) {
        console.log("Manager initialized.");
        // !!! 下面这行是导致提前弹窗的元凶，注释掉或移除 !!!
        // checkBluetoothState();
    } else {
        console.error("BleManager is not available"); // 这个情况理论上不应发生，如果 manager 是在顶层初始化的
    }
}, [manager/*, checkBluetoothState*/]); // 如果移除了调用，也要移除依赖

在权限授予后，再执行状态检查或其他操作：

修改 BluetoothScreen.js 中的 handleEnableBluetooth 函数。在 requestPermissions 返回 true 后，才调用那些需要与 BleManager 交互的函数，比如 checkBluetoothState（如果需要检查状态）或者直接开始扫描。

// BluetoothScreen.js
const BluetoothScreen = ({ navigation }) => {
    const { requestPermissions, checkBluetoothState /* 假设你导出了这个 */ } = useBluetoothConnection();

    const handleEnableBluetooth = async () => {
        console.log("Requesting Bluetooth permission...");
        const granted = await requestPermissions(); // 请求权限，这会触发弹窗
        console.log("Bluetooth permission granted:", granted);

        if (granted) {
            // 权限拿到手了！现在可以安全地与 BleManager 交互了
            console.log("Permission granted, now checking Bluetooth state...");
            await checkBluetoothState(); // <--- 在这里调用，或者直接开始扫描等操作

            // 确认状态OK后，或者直接导航
            navigation.navigate("Camera");
        } else {
            Alert.alert("Permission required", "Bluetooth permissions are required to proceed. Enable bluetooth in your device settings. Also, make sure location permissions are enabled for the app.");
        }
    };
    // ... (render)
};

注意事项：

这种方法下，BleManager 实例虽然创建了，但在获得权限前，它基本处于“沉睡”状态。确保没有任何其他代码路径会意外地“唤醒”它（比如调用了 manager.startDeviceScan()）。
务必检查 Info.plist 文件是否包含了所有必要的权限键 (NSBluetoothAlwaysUsageDescription, NSBluetoothPeripheralUsageDescription, 以及用于扫描的定位权限 NSLocationWhenInUseUsageDescription 等)，并且描述文本清晰地告知用户为何需要这些权限。这是通过苹果审核和获得用户信任的基础。你的 Info.plist 看起来是配置齐全的，这点很好。

<!-- Info.plist 相关权限 (确认这些 key 和 string 都存在且有意义) -->
<key>NSBluetoothAlwaysUsageDescription</key>
<string>$(PRODUCT_NAME) 需要访问蓝牙来配置 Hub 和手表。</string>
<key>NSBluetoothPeripheralUsageDescription</key>
<string>$(PRODUCT_NAME) 需要访问蓝牙来配置 Hub 和手表。</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>$(PRODUCT_NAME) 需要您的位置信息来发现附近的蓝牙设备。</string>
<!-- 根据需要可能还有 NSLocationAlwaysUsageDescription 等 -->