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

问题现象描述

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

问题影响范围

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

1. 仅出现在iOS 15系统上（如iPhone 12运行iOS 15.3.1）
2. 在iOS 17及更高版本上不会出现
3. Android设备完全不受此问题影响
4. 在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上，这个机制似乎出现了异常。

问题根源推测

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

1. iOS 15的AVPlayer内存管理异常：可能是iOS 15特定版本中AVPlayer的引用计数处理存在缺陷，导致播放器对象没有被及时释放。

2. RunLoop处理差异：iOS 15可能在处理视图控制器转场时的RunLoop行为有所不同，影响了清理操作的及时执行。

3. 系统级音频会话管理：滑动底部导航栏可能触发了系统级的音频会话重新配置，间接解决了残留问题。

临时解决方案

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

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

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

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

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

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

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

长期解决方案建议

对于库维护者，可能需要考虑：

1. 在iOS 15上增加额外的清理保障机制
2. 深入研究iOS 15特定版本中AVFoundation框架的行为变化
3. 考虑在组件卸载时强制终止音频会话

开发者注意事项

遇到类似问题时，开发者应该：

1. 明确测试设备和系统版本
2. 考虑实现防御性编程，不依赖系统自动清理
3. 在关键生命周期节点主动管理媒体播放状态
4. 关注React Native Video库的更新，及时获取修复

这个问题提醒我们，在跨平台开发中，特定设备和系统版本的特殊行为需要特别关注，完善的错误边界处理和防御性编程能够显著提升应用稳定性。