React Native Video组件在Android平台上的卸载后继续播放问题分析

问题背景

在使用React Native Video组件时，开发者发现了一个特殊的行为异常：当视频组件被包裹在带有手势处理(Gesture Handler)的模态框中时，在Android平台上执行滑动手势关闭模态框后，视频会继续播放，即使组件已经被卸载(unmounted)。

问题复现条件

这个问题在特定条件下才会出现：

1. 使用React Native Gesture Handler库处理滑动手势
2. 手势操作直接在视频组件上执行
3. 在Android平台上运行
4. 使用新架构(New Architecture)和互操作层(interop layer)

技术分析

根本原因

这个问题的核心在于Android平台上ExoPlayer的生命周期管理。当视频组件被卸载时，ExoPlayer实例没有被正确释放。特别是在使用手势处理时，由于手势事件的处理流程可能会干扰组件的正常卸载流程，导致ExoPlayer的清理工作未能执行。

解决方案原理

通过在ExoPlayerView类中重写onDetachedFromWindow方法，可以确保在视图从窗口分离时强制停止并释放播放器资源。这个方法会在视图从窗口分离时自动调用，无论是因为正常的组件卸载还是其他原因。

解决方案实现

在ExoPlayerView类中添加以下代码：

override fun onDetachedFromWindow() {
    super.onDetachedFromWindow()
    player?.let {
        it.playWhenReady = false
        it.stop()
        it.clearVideoSurface()
        it.release()
    }
    player = null
}

这段代码执行了以下关键操作：

1. 将playWhenReady设置为false，停止播放
2. 调用stop()方法停止播放器
3. 清除视频表面
4. 释放播放器资源
5. 将player引用置为null

最佳实践建议

1. 资源管理：在使用视频组件时，特别是在动态加载/卸载的场景下，确保实现完善的资源清理机制。

2. 手势处理：当视频组件与手势处理结合使用时，要注意测试各种边界条件，确保组件生命周期不受影响。

3. 平台差异：Android和iOS在多媒体处理上有显著差异，需要针对不同平台进行充分测试。

4. 性能监控：在实现这类修改后，应该监控应用的内存使用情况，确保没有资源泄漏。

总结

React Native Video组件在Android平台上的这个问题展示了跨平台开发中常见的平台特定行为。通过深入理解底层实现机制，我们能够找到有效的解决方案。这个案例也提醒开发者，在使用复杂UI交互(如手势处理)与资源密集型组件(如视频播放器)结合时，需要特别注意资源管理和生命周期控制。