React Native Video 组件在 Android 上的 ResizeMode 重复播放问题解析

问题现象

在 React Native 项目中，当使用 react-native-video 组件播放视频时，如果设置了 repeat 属性为 true，在 Android 平台上会出现一个特殊的显示问题。具体表现为：视频第一次播放时 resizeMode 属性（如 COVER）能够正常生效，但当视频循环播放第二次及以后时，resizeMode 就会失效，导致视频显示方式发生变化。

问题复现条件

这个问题在以下环境中被确认存在：

• react-native-video 版本 6.1.2 和 6.2.0
• Android 13 系统
• 真实设备上出现
• 使用特定视频源时更容易复现

值得注意的是，并非所有视频都会触发这个问题，某些视频源可能不会表现出这个异常行为。这表明问题可能与视频的编码格式或其他特性有关。

技术分析

从技术实现角度来看，这个问题可能源于 Android 原生视频播放器在重复播放时的视图重置逻辑。当视频第一次播放时，React Native 能够正确地将 resizeMode 属性传递给原生组件。但在循环播放时，可能是由于以下原因之一导致了属性失效：

1. 视图层在重复播放时没有重新应用布局参数
2. 原生组件在循环播放时重置了视图属性但没有重新应用 React Native 传递的样式
3. 视频解码器在循环播放时采用了不同的渲染路径

特别值得注意的是，当使用 flex: 1 样式时，这个问题更容易出现。这提示我们样式计算可能在循环播放时没有正确重新执行。

解决方案

目前社区已经针对这个问题提出了修复方案，主要改进点包括：

1. 确保在每次循环播放时都重新应用 resizeMode 属性
2. 修复了视频循环播放时的布局闪烁问题
3. 增强了属性传递的稳定性

对于开发者来说，可以采取以下临时解决方案：

1. 避免在视频容器上使用 flex: 1 样式
2. 明确设置视频容器的宽度和高度
3. 考虑使用 onEnd 事件手动重新加载视频，而不是依赖 repeat 属性

最佳实践建议

在使用 react-native-video 组件时，建议：

1. 对重要的视频播放场景进行全面测试，特别是循环播放功能
2. 针对不同视频源进行兼容性测试
3. 保持 react-native-video 组件更新到最新版本
4. 对于关键业务场景，考虑实现自定义的视频循环逻辑以获得更稳定的表现

这个问题提醒我们，在跨平台开发中，即使是看似简单的属性也可能因为平台差异而产生不同的行为，全面的测试和及时关注社区更新是保证应用质量的重要手段。