React Native Video 在 tvOS 上的全屏播放控制问题解析

在 React Native 生态系统中，react-native-video 是一个广泛使用的视频播放组件。然而，在 tvOS 平台上使用该组件时，开发者可能会遇到一些特有的全屏播放控制问题。本文将深入分析这些问题及其解决方案。

问题现象

在 tvOS 17.5.1 系统上，当调用 presentFullscreenPlayer() 方法时，会出现两个主要问题：

1. 播放控制界面中的字幕和音频选择菜单无法通过 Apple 触控遥控器进行选择
2. 如果在调用 presentFullscreenPlayer() 时设置了 controls={true} 属性，会导致屏幕变白，视频内容不可见

技术分析

控制菜单不可选问题

这个问题的根源在于 tvOS 的播放控制器视图默认配置。在 tvOS 平台上，AVPlayerViewController 的 showsPlaybackControls 属性被强制设置为 true 时，会导致部分控制功能异常。

通过分析源代码发现，在创建 RCTVideoPlayerViewController 时，直接设置了 showsPlaybackControls 属性为 self._controls 的值。这在 tvOS 上会产生不良影响，因为 tvOS 的全屏播放器应该始终显示控制界面。

白屏问题

当 controls={true} 与 presentFullscreenPlayer() 同时使用时出现的白屏问题，是由于 tvOS 的全屏播放器实现机制与 iOS 不同。在 tvOS 上，全屏播放器已经内置了控制界面，再次强制显示控制界面会导致渲染冲突。

解决方案

修改源代码

针对控制菜单不可选的问题，可以通过修改 react-native-video 的源代码来解决。具体修改是在创建 RCTVideoPlayerViewController 时，注释掉 showsPlaybackControls 属性的设置：

func createPlayerViewController(player: AVPlayer, withPlayerItem _: AVPlayerItem) -> RCTVideoPlayerViewController {
    let viewController = RCTVideoPlayerViewController()
    // viewController.showsPlaybackControls = self._controls
    ...
}

这样修改后，tvOS 将使用系统默认的控制界面配置，字幕和音频菜单就可以正常选择了。

使用替代方法

对于全屏播放的实现，建议使用 setFullScreen 方法替代 presentFullscreenPlayer()。这个方法专门为处理跨平台的全屏播放场景而设计，能够更好地适应不同平台的特性和限制。

最佳实践

1. 在 tvOS 平台上实现全屏播放时，优先使用 setFullScreen 方法
2. 避免在全屏播放时强制设置 controls 属性
3. 如果需要自定义控制界面，考虑使用 tvOS 平台特定的实现方式
4. 对于必须使用 presentFullscreenPlayer() 的场景，确保不传递 controls={true} 参数

总结

react-native-video 在 tvOS 平台上的全屏播放控制问题主要源于平台差异和属性配置不当。通过理解 tvOS 的播放器控制机制，并采用适当的解决方案，开发者可以确保视频播放功能在所有平台上都能正常工作。对于这类跨平台组件，理解各平台的特性和限制是解决问题的关键。