React Native Video组件在Android平台上的resizeMode渲染问题解析

问题背景

在React Native Video组件从Alpha版本升级到Beta 6版本后，Android平台上出现了一个关于视频缩放模式的渲染问题。这个问题主要影响那些需要在不同方向视频(竖屏/横屏)间切换并应用不同缩放模式(contain/cover)的应用场景。

问题现象

在Beta 6版本中，当使用resizeMode属性时，Android平台上会出现以下异常行为：

1. 视频会先以默认尺寸渲染
2. 然后才应用指定的resizeMode样式
3. 导致视频在加载过程中出现明显的尺寸变化和闪烁

这与Alpha版本的行为形成鲜明对比，在Alpha版本中，视频加载时会同时应用resizeMode和样式，没有延迟或闪烁。

技术分析

这个问题源于ExoPlayer的弃用和新的视频渲染管线的引入。在Beta 6版本中，Android平台的视频渲染流程发生了变化：

1. 视频组件首先创建基础视图
2. 然后加载视频内容
3. 最后才应用resizeMode和样式属性

这种顺序导致了视觉上的"跳跃"效果，特别是在FlatList或类似的可滚动容器中切换视频时尤为明显。

临时解决方案

在官方修复前，开发者可以采用以下临时解决方案：

1. 使用resizeMode="stretch"模式
2. 然后手动计算和控制视频尺寸
3. 根据视频宽高比动态调整样式

虽然这种方法可以避免闪烁问题，但需要开发者自行处理视频缩放逻辑，可能无法完美复现contain/cover模式的效果。

官方修复

在6.0.0正式版本中，这个问题已得到修复。新版本恢复了与iOS平台一致的行为：

1. 视频加载时同步应用resizeMode
2. 消除了加载过程中的视觉闪烁
3. 确保了跨平台的一致性

最佳实践建议

对于需要处理多种视频比例的应用，建议：

1. 确保使用6.0.0或更高版本
2. 针对不同比例的视频采用合适的resizeMode
   • 宽屏视频(宽度>高度)：使用contain模式
   • 竖屏视频(高度>宽度)：使用cover模式
3. 在列表中使用视频时，考虑预加载机制减少视觉跳跃

总结

React Native Video组件在6.0.0版本中解决了Android平台上resizeMode的渲染顺序问题，恢复了平滑的视频加载体验。开发者现在可以像在iOS平台上一样，在Android上无缝使用contain/cover等缩放模式，而不用担心加载闪烁问题。