React Native Video 组件在 Android 上的全屏显示问题分析与解决方案

问题现象

在使用 React Native Video 组件（6.2.0 版本）时，Android 平台上出现了一个显示异常问题。具体表现为：当用户点击默认控制栏中的全屏按钮进入全屏模式，然后再退出全屏后，屏幕顶部和底部会出现异常的白色空白区域。这个问题不仅影响当前视频组件，还会影响整个应用的布局。

问题复现条件

该问题在以下环境中可以稳定复现：

• Android 13.0 API 33 系统
• 真实设备和模拟器均可复现
• 使用旧架构（Old architecture）的 React Native 应用
• 当视频组件使用 flex: 1 样式或指定具体宽高时都会出现

技术分析

经过深入分析，发现问题根源在于 ReactExoplayerView.java 文件中处理全屏状态切换时的系统窗口适配逻辑。具体来说：

1. 进入全屏模式时，组件会调用 WindowCompat.setDecorFitsSystemWindows(window, false) 来禁用系统窗口适配
2. 退出全屏时，组件无条件地将该值设置为 true (WindowCompat.setDecorFitsSystemWindows(window, true))
3. 这种做法忽略了应用原本可能设置的 fitsSystemWindows 属性值

这种强制覆盖原始值的做法导致了布局异常，因为应用可能原本配置了不同的系统窗口适配方式。

解决方案

针对这个问题，社区开发者提出了一个有效的修复方案。该方案的核心思想是：

1. 在进入全屏前，先保存当前的 fitsSystemWindows 状态
2. 退出全屏时，恢复这个原始状态而不是强制设置为 true

具体实现需要对 ReactExoplayerView.java 文件进行以下修改：

1. 添加一个成员变量 originalFitsSystemWindows 来保存原始状态
2. 在进入全屏时记录当前窗口的 fitsSystemWindows 值
3. 在退出全屏时恢复这个值

临时解决方案

对于无法立即修改原生代码的项目，可以采用以下临时解决方案：

1. 使用自定义控制栏替代默认控制栏，避免触发全屏切换逻辑
2. 手动实现全屏功能，控制好系统窗口适配状态

最佳实践建议

1. 在使用视频组件时，建议明确指定宽高而不是仅使用 flex: 1
2. 对于需要全屏功能的场景，考虑实现自定义控制逻辑以获得更好的控制权
3. 关注 React Native Video 组件的更新，及时获取官方修复

总结

这个问题的本质是组件在全屏状态切换时没有妥善处理系统窗口适配状态的保存与恢复。通过理解其底层机制，开发者不仅可以解决当前问题，还能更好地掌握 Android 平台上全屏视频的实现原理。对于类似的多媒体组件开发，状态管理和系统交互是需要特别注意的关键点。