如何让Activity在后台仍正常运行 React Native音频播放后台保活问题

根因说明 #

App切后台后音频停止本质是两个限制共同作用的结果：

1. 移动端系统默认会降低后台App的进程优先级，非活跃进程很容易被资源回收，导致应用内逻辑暂停
2. iframe承载的音频属于WebView内的播放任务，WebView在App进入后台时默认会被系统挂起，内部的音频播放逻辑会被直接终止

修复步骤 #

1. 基础后台权限配置

• Android端：在android/app/src/main/AndroidManifest.xml中添加以下权限：

<!-- 前台服务权限 -->
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />
<!-- 唤醒锁 避免CPU休眠 -->
<uses-permission android:name="android.permission.WAKE_LOCK" />

• iOS端：打开Xcode项目，进入Signing & Capabilities标签页，添加Background Modes能力，勾选Audio, AirPlay, and Picture in Picture选项。

2. 最优方案：替换iframe播放逻辑

iframe的播放逻辑受WebView生命周期限制，无法完全适配后台播放场景，建议直接提取iframe中的音频源地址，用原生音频库接管播放：

• 使用react-native-track-player作为播放内核，它原生支持后台播放、锁屏控制、音频焦点处理等能力，完全覆盖移动端音频播放的各类场景，不需要依赖WebView实现。

3. 兼容方案：强制保留iframe的处理逻辑

如果业务逻辑无法脱离iframe运行，需要做以下适配：

• WebView配置：关闭播放用户交互限制，Android端调用webview.setMediaPlaybackRequiresUserGesture(false)，iOS端设置WebView属性mediaPlaybackRequiresUserAction={false}
• 生命周期劫持：Android端在WebView所在Activity的onPause生命周期回调中主动调用WebView的onResume()方法，阻止WebView被系统挂起
• 进程保活：App切后台时启动一个前台服务，展示常驻通知栏，将App进程优先级提升到前台级别，避免被系统回收

4. 额外适配注意项

• 不要在JS层的AppState监听逻辑中添加切后台暂停播放的代码，避免主动触发播放终止
• 测试时需要关闭部分国产定制系统的电池优化权限，部分系统会强制杀死未加入电池白名单的后台App

内容的提问来源于stack exchange，提问作者Lucas Gardini Dias