如何在React Native中实现跨平台外接外设连接断开状态检测

前置说明 #

需要先获取麦克风权限才能正常读取设备列表，所有实现方案都依赖该前提条件。

方案一：使用社区库实现（推荐，无需原生开发） #

1. 安装依赖 #

# npm
npm install react-native-media-devices react-native-permissions
# yarn
yarn add react-native-media-devices react-native-permissions
# iOS 执行pod安装
cd ios && pod install && cd ..

2. 双端权限配置 #

• iOS端：在项目ios/[项目名]/Info.plist文件中添加权限声明：

<key>NSMicrophoneUsageDescription</key>
<string>需要访问麦克风以检测外接设备连接状态</string>

• Android端：在项目android/app/src/main/AndroidManifest.xml文件中添加权限声明：

<!-- 麦克风访问权限 -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<!-- 音频设置修改权限，用于监听设备变化 -->
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

3. 核心业务代码 #

import { useEffect, useState } from 'react';
import { Platform } from 'react-native';
import { mediaDevices } from 'react-native-media-devices';
import { check, PERMISSIONS, RESULTS } from 'react-native-permissions';

const MicDetectionDemo = () => {
  const [isExternalMicConnected, setIsExternalMicConnected] = useState(false);

  // 检测当前外接麦克风状态
  const detectMicStatus = async () => {
    // 校验权限
    const micPermission = Platform.select({
      ios: PERMISSIONS.IOS.MICROPHONE,
      android: PERMISSIONS.ANDROID.RECORD_AUDIO
    });
    const permissionResult = await check(micPermission);
    if (permissionResult !== RESULTS.GRANTED) {
      setIsExternalMicConnected(false);
      return;
    }
    // 获取所有音频输入设备
    const deviceList = await mediaDevices.enumerateDevices();
    const audioInputDevices = deviceList.filter(item => item.kind === 'audioinput');
    // 自定义匹配规则：可根据实际调试的设备label调整关键词
    const hasExternalMic = audioInputDevices.some(device => {
      const lowerLabel = device.label.toLowerCase();
      return lowerLabel.includes('external') || lowerLabel.includes('headset') || lowerLabel.includes('usb') || lowerLabel.includes('wired');
    });
    setIsExternalMicConnected(hasExternalMic);
  };

  useEffect(() => {
    // 初始化检测
    detectMicStatus();
    // 监听设备变化事件
    const listener = mediaDevices.addEventListener('devicechange', detectMicStatus);
    // 组件卸载时移除监听
    return () => listener.remove();
  }, []);

  return null;
};

export default MicDetectionDemo;

方案二：自定义原生模块实现（适合高度定制场景） #

如果不想引入第三方依赖，可自行封装原生能力实现：

• Android端：注册监听AudioManager.ACTION_AUDIO_DEVICE_CHANGED系统广播，通过AudioManager.getDevices(AudioManager.GET_DEVICES_INPUTS)方法获取当前所有音频输入设备，判断设备类型是否为外接麦克风
• iOS端：注册监听AVAudioSessionRouteChangeNotification系统通知，在回调中通过AVAudioSession.sharedInstance.currentRoute.inputs获取当前音频输入路由，判断是否存在外接输入设备

注意：自定义原生模块时也需要先申请麦克风权限，否则系统会限制设备信息的读取权限，导致检测结果不准确。

内容的提问来源于stack exchange，提问作者Ale TheFe