React Native Video 全屏模式下的导航栏与控制器处理方案

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

在 React Native Video 6.4.3 版本中，当视频进入全屏模式时，Android 设备的底部导航栏会保持可见状态。这一设计选择是为了确保用户在全屏观看视频时仍能访问返回按钮、最小化等系统功能。

开发者可以通过修改 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
    )
}

退出全屏时，需要重置 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} 属性，全屏模式下仍会显示默认控制器。这是因为全屏模式的控制器是由原生端独立处理的，与普通模式下的控制器不同。

解决方案有两种：

1. 避免使用原生全屏模式：不直接使用 fullScreen={true} 属性，而是通过 JavaScript 端实现全屏效果。可以创建一个新的全屏页面，在用户点击全屏按钮时导航至该页面，这样就能完全自定义控制器。

2. 等待功能更新：React Native Video 团队正在考虑添加新属性来控制全屏模式下的导航栏显示行为，未来版本可能会提供更灵活的配置选项。

状态栏颜色问题

另一个需要注意的问题是，在 Android 设备上使用 fullScreen={true} 时，状态栏会变为黑色，且在退出全屏后不会恢复原色。这已被确认为一个需要修复的问题，预计在后续版本中解决。

最佳实践建议

1. 如果需要完全自定义的全屏体验，建议采用 JavaScript 端实现方案，避免依赖原生全屏模式。

2. 若必须使用原生全屏模式，可以等待官方更新，或自行修改原生代码实现所需效果。

3. 对于状态栏颜色问题，目前可通过监听全屏状态变化，在 JavaScript 端手动调整状态栏样式作为临时解决方案。

React Native Video 作为一个成熟的视频播放组件，在全屏体验方面提供了基础功能，同时也保留了让开发者根据需求进行自定义的灵活性。理解这些底层机制有助于开发者更好地控制视频播放体验。