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

问题现象

在使用React Native Video组件时，开发者在Android平台上遇到了一个特殊问题：当视频组件被包裹在手势处理组件中时，如果通过手势操作触发组件卸载，视频会继续在后台播放，而不会正常停止。这种情况只发生在视频区域内的手势操作，如果手势操作发生在视频区域外，则一切表现正常。

技术背景分析

React Native Video组件在Android平台底层使用了ExoPlayer来实现视频播放功能。ExoPlayer是Google推出的一个应用级媒体播放器，为Android应用程序提供音频和视频播放能力。正常情况下，当React Native组件卸载时，应该触发相应的生命周期方法，释放播放器资源。

问题根源

经过技术分析，这个问题主要源于以下几个方面：

1. 手势处理与组件卸载的时序问题：当使用React Native Gesture Handler进行手势处理时，特别是在视频区域内触发手势操作导致组件卸载的情况下，ExoPlayer的释放流程可能没有被正确执行。

2. 生命周期管理不完善：React Native Video组件的Android原生实现中，ExoPlayerView类缺少对onDetachedFromWindow方法的覆盖实现，导致视图从窗口分离时没有正确释放播放器资源。

3. 新架构兼容性问题：该问题在新架构(New Architecture)与互操作层(interop layer)环境下更容易出现，表明可能与React Native的新旧架构转换过程有关。

解决方案

针对这个问题，社区开发者提出了有效的解决方案，即在ExoPlayerView类中重写onDetachedFromWindow方法，确保视图从窗口分离时正确释放播放器资源：

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

这个解决方案的核心在于：

1. 当视图从窗口分离时，强制停止播放器
2. 清除视频表面
3. 释放播放器资源
4. 将播放器引用置空，防止内存泄漏

最佳实践建议

为了避免类似问题，开发者在实现自定义视频播放功能时，应该注意以下几点：

1. 完善生命周期管理：确保在组件卸载时正确释放所有媒体资源，包括停止播放、清除表面和释放播放器。

2. 手势处理与资源释放的协调：当手势操作可能导致组件卸载时，应该确保资源释放逻辑能够正确执行。

3. 新架构下的兼容性测试：在使用React Native新架构时，要特别注意原生模块的生命周期管理，进行充分的测试。

4. 错误处理与日志记录：添加适当的错误处理和日志记录，便于排查类似问题。

总结

React Native Video组件在Android平台上的这个问题展示了在复杂交互场景下资源管理的重要性。通过深入分析底层实现和生命周期管理，开发者可以更好地理解问题本质并找到有效的解决方案。这也提醒我们在使用第三方库时，需要关注其在不同平台和架构下的行为差异，确保应用的稳定性和资源使用的正确性。