React Native Video 全屏模式下的导航栏与控制器问题解析

全屏模式下的导航栏显示问题

在 React Native Video 项目中，当视频进入全屏模式时，Android 设备上会出现一个常见问题：系统默认的底部导航栏仍然保持可见状态。这个问题源于原生层的实现方式，默认情况下没有启用沉浸式模式来隐藏系统UI元素。

从技术实现角度来看，Android 系统提供了沉浸式模式(Immersive Mode)API，允许应用临时隐藏状态栏和导航栏。开发者可以通过修改 FullScreenPlayerView 的 onAttachedToWindow 方法，添加适当的系统UI标志来实现这一效果：

override fun onAttachedToWindow() {
    super.onAttachedToWindow()
    window.decorView.systemUiVisibility = (
        View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
        or View.SYSTEM_UI_FLAG_FULLSCREEN
        or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
        or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
        or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
        or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
    )
}

同时，当退出全屏模式时，需要在 onDetachedFromWindow 方法中恢复默认的UI可见性设置：

override fun onDetachedFromWindow() {
    super.onDetachedFromWindow()
    window.decorView.systemUiVisibility = (
        View.SYSTEM_UI_FLAG_LAYOUT_STABLE
        or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
        or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    )
}

全屏模式下的控制器显示问题

另一个相关问题是关于全屏模式下的视频控制器。即使用户设置了 controls={false} 属性，在全屏模式下系统默认的控制器仍然会显示。这是因为 React Native Video 的全屏实现分为两部分：

1. 普通模式下的控制器由JavaScript层控制
2. 全屏模式下的控制器则由原生层直接处理

这种设计导致开发者无法直接在全屏模式下使用自定义的控制器组件。针对这个问题，社区提出了一个实用的解决方案：不直接使用库提供的全屏功能，而是在JavaScript层自行实现全屏逻辑。

具体实现思路是：

1. 创建一个专门的全屏视频播放页面
2. 当用户点击全屏按钮时，使用React Navigation等路由库导航到这个全屏页面
3. 在全屏页面中使用相同的视频组件，但以全屏尺寸渲染
4. 这样可以完全控制全屏模式下的UI表现，包括自定义控制器

状态栏颜色恢复问题

有开发者报告了另一个相关问题：在Android设备上使用fullscreen={true}属性后，当退出全屏模式时，状态栏会保持黑色而无法恢复原来的颜色。这个问题已经被项目维护者确认，并在后续版本中进行了修复。

设计考量与最佳实践

从架构设计的角度来看，视频播放器的全屏行为应该提供足够的灵活性。理想情况下，库应该提供配置选项，让开发者可以决定：

1. 是否在全屏模式下隐藏导航栏
2. 是否使用原生全屏控制器
3. 如何恢复退出全屏后的系统UI状态

对于需要高度定制化的应用，建议采用JavaScript层实现全屏逻辑的方案。这种方法虽然需要更多开发工作，但提供了最大的灵活性和控制力。

对于大多数应用，可以等待库提供更多配置选项，或者考虑提交Pull Request来贡献改进方案。在社区驱动的开源项目中，这类功能的演进往往依赖于用户反馈和贡献。