React Native Video 在 iOS 上的 ScrollView 布局问题解析与解决方案

问题现象描述

React Native Video 组件在 iOS 平台上与 ScrollView 结合使用时，当视频开始播放后会出现布局异常。具体表现为视频视图突然被截断，ScrollView 的起始位置发生变化，导致视频内容无法完整显示即使用户尝试滚动也无法恢复。

问题复现条件

这个问题在以下环境中可以稳定复现：

• 使用 React Native Video 6.x 版本
• iOS 平台（包括真机和模拟器）
• 视频组件设置了 controls 属性为 true
• 视频被放置在 ScrollView 或 FlatList 等可滚动容器中
• 应用使用了导航头部（navigation header）

问题根源分析

经过开发者社区的分析，这个问题主要源于 iOS 平台上当视频控件的 controls 属性启用时，React Native Video 内部会从 AVPlayerLayer 切换到 AVPlayerViewController 的实现方式。这种切换过程中，布局约束未能正确保持，导致视频视图的尺寸和位置信息丢失。

具体来说，当 controls 属性为 true 时：

1. 组件会调用 removePlayerLayer() 移除原有的 AVPlayerLayer 实现
2. 然后调用 usePlayerViewController() 切换到 AVPlayerViewController
3. 但在此过程中，新的视图控制器视图没有正确设置自动布局约束

解决方案

目前社区提供了几种可行的解决方案：

1. 临时修复方案（推荐）

通过修改 React Native Video 的 iOS 原生代码，在切换视图控制器时手动添加约束：

if _controls {
    self.removePlayerLayer()
    self.usePlayerViewController()
    
    if let playerViewController = _playerViewController, let playerView = playerViewController.view {
        playerView.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(playerView)
        
        NSLayoutConstraint.activate([
            playerView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            playerView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
            playerView.topAnchor.constraint(equalTo: self.topAnchor),
            playerView.bottomAnchor.constraint(equalTo: self.bottomAnchor)
        ])
    }
}

2. 使用 react-native-screens 的 ModalScreenNativeComponent

import ModalScreenNativeComponent from "react-native-screens/src/fabric/ModalScreenNativeComponent";

<ModalScreenNativeComponent>
    <Video
        controls={true}
        source={{uri: props?.source}}
        style={{aspectRatio: 16/9}}
        resizeMode={"contain"}
    />
</ModalScreenNativeComponent>

3. 降级方案

如果暂时无法修改原生代码，可以考虑：

• 在 iOS 上使用 React Native Video 5.2.1 版本
• 在 Android 上使用 6.x 版本
• 通过平台判断分别加载不同版本的组件

最佳实践建议

1. 布局规范：确保视频组件有明确的尺寸定义，避免依赖不确定的布局计算
2. 性能考量：在列表中使用视频时，注意实现适当的回收机制
3. 错误处理：添加 onError 回调处理视频加载失败的情况
4. 内存管理：在组件卸载时确保正确释放视频资源

问题影响范围

这个问题主要影响以下场景：

• 视频列表页面
• 带有导航头的视频详情页
• 模态框中的视频播放器
• 任何需要滚动查看的视频内容

总结

React Native Video 在 iOS 上的这个布局问题是一个典型的平台特定行为导致的UI异常。通过理解底层实现机制，开发者可以选择最适合自己项目的解决方案。目前社区提供的补丁方案已经验证有效，建议关注官方仓库的更新以获取正式的修复版本。