React Native Video 在 Android 上的全屏模式白边问题解析与解决方案

问题现象

React Native Video 组件在 Android 平台上存在一个影响用户体验的显示问题。当用户点击默认控制栏中的全屏按钮进入全屏模式，然后退出全屏后，视频播放器的顶部和底部会出现异常的白边。这个问题不仅影响当前屏幕，还会影响整个应用的布局，导致界面显示异常。

问题根源分析

经过技术团队深入分析，发现问题出在 ReactExoplayerView 的实现逻辑上。当进入全屏模式时，组件会调用 WindowCompat.setDecorFitsSystemWindows(window, false) 来禁用系统窗口装饰适配；而在退出全屏时，它简单地调用 WindowCompat.setDecorFitsSystemWindows(window, true) 强制恢复为 true。

这种实现方式存在两个关键缺陷：

1. 没有记录应用原始的 fitsSystemWindows 状态值，粗暴地假设原始值总是 true
2. 状态恢复逻辑不够严谨，可能破坏应用原有的窗口配置

技术解决方案

针对这个问题，社区开发者 LiuBergaria 提出了一个优雅的修复方案。核心思路是：

1. 在全屏操作前，先保存窗口原始的 fitsSystemWindows 状态
2. 退出全屏时，恢复为之前保存的原始值，而不是硬编码为 true

具体实现是通过在 ReactExoplayerView 类中添加一个成员变量 originalFitsSystemWindows 来存储原始状态：

private boolean originalFitsSystemWindows;

然后在进入全屏时保存当前状态：

originalFitsSystemWindows = window.getDecorView().getFitsSystemWindows();

最后在退出全屏时恢复原始状态：

WindowCompat.setDecorFitsSystemWindows(window, originalFitsSystemWindows);

临时解决方案

对于急需修复此问题的开发者，目前有以下几种临时解决方案：

1. 应用补丁：手动应用上述代码修改到 node_modules 中的 ReactExoplayerView.java 文件
2. 使用自定义控制栏：完全绕过默认的全屏控制逻辑，实现自定义的全屏切换功能
3. 固定宽高替代 flex：尝试使用具体宽高值而非 flex 布局，虽然不能根本解决问题，但可能减轻影响

最佳实践建议

1. 对于关键视频播放场景，建议实现自定义控制栏以获得更好的控制权
2. 在应用主题中明确定义窗口装饰相关属性，确保一致性
3. 关注 React Native Video 的版本更新，官方修复后及时升级

总结

这个问题的本质是状态管理不够严谨导致的副作用。在开发涉及全屏切换的功能时，必须特别注意：

• 任何状态修改都应该记录原始值
• 状态恢复必须严格匹配修改前的配置
• 系统级属性修改要格外谨慎，可能影响整个应用

React Native 社区已经注意到这个问题，预计在后续版本中会合并修复方案。开发者可以根据项目实际情况选择合适的临时解决方案，同时关注官方更新。