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

问题现象

在使用 React Native Video 组件（版本 6.2.0）时，Android 平台（特别是 Android 13 API 33）上出现了一个影响用户体验的显示问题。当用户点击默认控制条中的全屏按钮进入全屏模式，然后退出全屏后，屏幕顶部和底部会出现异常的白边空白区域。这个问题不仅影响当前视频播放界面，还会影响整个应用的布局。

问题根源分析

经过技术分析，这个问题源于 ReactExoplayerView 在处理全屏模式时的系统窗口适配逻辑。具体来说：

1. 进入全屏模式时，组件会强制将 decorFitsSystemWindows 设置为 false，以隐藏系统状态栏和导航栏
2. 退出全屏模式时，组件简单地将 decorFitsSystemWindows 重置为 true
3. 问题在于：应用原本的 decorFitsSystemWindows 设置可能不是 true，这种硬编码重置破坏了应用原有的窗口适配设置

技术解决方案

社区贡献者 LiuBergaria 提出了一个优雅的修复方案，通过以下修改解决了问题：

1. 在全屏操作前，先保存原始的 decorFitsSystemWindows 设置
2. 退出全屏时，恢复这个原始设置，而不是简单地设为 true

这个方案的核心是尊重应用原有的窗口适配配置，而不是强制覆盖。具体实现只需要对 ReactExoplayerView.java 文件进行少量修改。

临时解决方案

对于需要立即解决问题的开发者，目前有以下两种临时方案：

1. 自定义控制条：不使用默认的全屏控制按钮，而是实现自定义的全屏控制逻辑
2. 手动应用补丁：按照提供的补丁修改 node_modules 中的源代码

最佳实践建议

1. 对于关键视频播放功能，建议实现自定义控制条以获得更好的控制权
2. 关注 React Native Video 的版本更新，官方修复后应及时升级
3. 在全屏相关功能开发时，注意测试不同 Android 版本和设备的表现

总结

这个问题展示了在混合原生和 React Native 视图时可能遇到的微妙交互问题。理解 Android 窗口管理系统的工作原理对于解决这类显示问题至关重要。开发者应当注意系统级设置对应用布局的潜在影响，特别是在处理全屏等特殊显示模式时。