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

问题现象

在 React Native Video 组件（版本 6.1.2 及以上）中，当设置 repeat 属性为 true 时，Android 平台（特别是 Android 13）会出现一个特殊的显示问题。具体表现为：视频第一次播放时 ResizeMode 设置（如 COVER）能够正常生效，但从第二次循环播放开始，视频的缩放模式就会失效，导致视频显示异常。

问题复现条件

这个问题在特定条件下比较容易复现：

1. 使用 React Native Video 组件
2. 设置 repeat={true} 属性
3. 在 Android 设备上运行（特别是 Android 13）
4. 某些特定格式的视频文件更容易触发此问题

技术分析

从技术实现角度来看，这个问题可能源于以下几个方面：

1. 视频播放器状态管理：当视频循环播放时，播放器内部的状态重置可能没有正确处理视图的缩放属性。

2. Android 原生层与 JS 层的同步问题：ResizeMode 属性可能在第一次加载时正确传递到了原生层，但在循环播放时没有重新应用这些属性。

3. Flex 布局的潜在影响：虽然不一定是根本原因，但使用 flex:1 的样式可能会与视频缩放模式产生某些意外的交互效果。

解决方案

针对这个问题，开发团队已经在最新版本中提供了修复方案。主要改进包括：

1. 完善了视频循环播放时的属性重新应用机制
2. 确保每次循环播放都会正确重置和重新应用所有视图属性
3. 优化了 Android 平台上的视频渲染管线

最佳实践建议

为了避免类似问题，开发者可以注意以下几点：

1. 尽量使用最新版本的 React Native Video 组件
2. 对于关键的视频播放功能，进行全面测试，特别是循环播放场景
3. 考虑为视频容器指定明确的尺寸而非仅使用 flex 布局
4. 对于重要的视频资源，进行多种格式和编码的测试

总结

视频播放组件的显示问题往往涉及多层次的交互，从 JavaScript 业务逻辑到底层原生实现。React Native Video 组件的这个特定问题提醒我们，在使用跨平台组件时，需要对不同平台的特性和边界条件进行充分测试。随着项目的持续维护和改进，这类问题将得到更好的解决。