React Native Expo：无需 eject 如何添加锁屏媒体控制？

当然可以在不放弃Expo的前提下实现锁屏/通知栏的音频控制按钮，完全依赖Expo SDK内置的expo-av和配置即可，不需要原生模块或eject操作，具体实现步骤如下：

1. 配置音频会话类别 #

首先需要将音频会话设置为播放类别，让系统识别当前应用是音频播放类应用，这样系统才会自动生成锁屏控制栏。使用expo-av的Audio.setAudioSessionAsync方法完成配置：

import { Audio } from 'expo-av';

async function setupAudioSession() {
  await Audio.setAudioSessionAsync({
    category: Audio.Category.Playback,
    mode: Audio.Mode.Default,
    interruptionModeAndroid: Audio.InterruptionModeAndroid.DoNotMix,
    interruptionModeIOS: Audio.InterruptionModeIOS.DoNotMix,
    shouldDuckAndroid: false,
  });
}

这个配置会告诉系统：当前应用需要独占音频通道，并且是主动播放的应用，系统会为此类应用默认提供锁屏控制按钮。

2. 监听远程控制事件 #

系统会显示控制按钮，但需要你监听对应的远程控制事件，来响应播放、暂停、切歌等操作。通过Audio.addAudioPlaybackEventListener添加监听：

import { Audio } from 'expo-av';

let playbackObject; // 你的Audio.Sound实例

function setupRemoteControls() {
  Audio.addAudioPlaybackEventListener({
    remotePlay: () => {
      playbackObject.playAsync();
    },
    remotePause: () => {
      playbackObject.pauseAsync();
    },
    remoteNext: () => {
      // 处理下一曲逻辑
    },
    remotePrevious: () => {
      // 处理上一曲逻辑
    },
  });
}

3. 补充平台配置 #

iOS配置 #

在app.json的ios.infoPlist中添加后台音频权限，确保应用在后台能持续播放并显示控制栏：

{
  "ios": {
    "infoPlist": {
      "UIBackgroundModes": ["audio"]
    }
  }
}

Android配置 #

在app.json的android.permissions中添加前台服务音频权限，同时配置后台模式：

{
  "android": {
    "permissions": ["android.permission.FOREGROUND_SERVICE_AUDIO"],
    "useNextNotificationsApi": true
  }
}

注意事项 #

• 确保你的Audio.Sound实例已经正确初始化并加载了音频资源，否则系统控制按钮可能无法正常触发事件。
• 测试时需要在真实设备上进行，模拟器的锁屏控制栏可能存在兼容性问题。

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