React Native Video组件在iOS 15上的页面返回音频残留问题分析

2025-05-31 11:35:26作者：薛曦旖Francesca

问题现象描述

在使用React Native Video组件进行视频播放时，开发者报告了一个特定于iOS 15设备（特别是iPhone 12）的异常行为。当用户在当前页面播放视频时，点击返回按钮返回到上一个页面，视频组件虽然已经从视图层级中移除，但音频却仍然持续播放。只有当用户滑动设备的底部导航栏后，音频才会真正停止。

问题影响范围

经过测试验证，这个问题表现出以下特征：

仅出现在iOS 15系统上（如iPhone 12运行iOS 15.3.1）
在iOS 17及更高版本上不会出现
Android设备完全不受此问题影响
在React Native Video的5.2.1版本和6.0.0-beta.5版本中均存在

技术背景分析

在正常情况下，当React Native组件被卸载时，其对应的原生组件应该会触发dealloc方法，执行资源清理工作。从代码中可以看到，Video组件的iOS原生实现确实包含了完整的清理逻辑：

- (void)dealloc {
  [[NSNotificationCenter defaultCenter] removeObserver:self];
  [self removePlayerLayer];
  [self removePlayerItemObservers];
  [_player removeObserver:self forKeyPath:playbackRate context:nil];
  [_player removeObserver:self forKeyPath:externalPlaybackActive context: nil];
}

理论上，这些清理操作应该能够确保播放器被正确销毁，音频停止播放。但在iOS 15上，这个机制似乎出现了异常。

问题根源推测

基于现象分析，可能的原因包括：

iOS 15的AVPlayer内存管理异常：可能是iOS 15特定版本中AVPlayer的引用计数处理存在缺陷，导致播放器对象没有被及时释放。
RunLoop处理差异：iOS 15可能在处理视图控制器转场时的RunLoop行为有所不同，影响了清理操作的及时执行。
系统级音频会话管理：滑动底部导航栏可能触发了系统级的音频会话重新配置，间接解决了残留问题。

临时解决方案

目前可行的临时解决方案包括：

手动暂停法：在组件即将卸载时显式调用pause()方法

useEffect(() => {
  return () => {
    if(videoRef.current) {
      videoRef.current.pause();
    }
  };
}, []);

页面可见性监听：监听页面可见性变化，在页面隐藏时暂停播放

useEffect(() => {
  const subscription = AppState.addEventListener('change', (state) => {
    if(state !== 'active') {
      videoRef.current?.pause();
    }
  });
  
  return () => subscription.remove();
}, []);

导航事件拦截：在返回导航触发时先暂停视频

useEffect(() => {
  const unsubscribe = navigation.addListener('beforeRemove', () => {
    videoRef.current?.pause();
  });
  
  return unsubscribe;
}, [navigation]);