React Native Video 在 Android 平台的黑屏问题解决方案

问题背景

在使用 React Native Video 组件时，Android 平台在视频加载过程中会出现黑屏现象。这个问题在 6.4.1 版本中被报告，主要表现为即使设置了 hideShutterView 属性，黑屏仍然会出现。

问题分析

黑屏现象实际上是 Android 平台 ExoPlayer 的默认行为，它会在视频加载完成前显示一个"快门视图"(shutter view)。这个视图原本的设计目的是在视频加载时提供一个视觉过渡效果，但在某些场景下可能不符合开发者的需求。

解决方案

方法一：使用 shutterColor 属性

React Native Video 提供了 shutterColor 属性，可以自定义快门视图的颜色。要完全消除黑屏效果，可以将其设置为透明：

<Video
  source={{uri: 'your-video-uri'}}
  shutterColor={'transparent'}
/>

如果希望保持背景色但不显示黑屏，可以设置为与背景相同的颜色：

<Video
  source={{uri: 'your-video-uri'}}
  shutterColor={'white'}  // 假设背景是白色
/>

方法二：结合加载状态控制

对于更复杂的需求，可以结合视频加载状态来控制覆盖视图：

const [isLoaded, setIsLoaded] = useState(false);

// 使用防抖函数避免闪烁
const debouncedOnLoad = useMemo(
  () => debounce(() => setIsLoaded(true), 200),
  []
);

return (
  <View style={{backgroundColor: 'white'}}>
    <Video
      onReadyForDisplay={debouncedOnLoad}
      // 其他视频属性...
    />
    {!isLoaded && (
      <View
        style={[
          StyleSheet.absoluteFill,
          {backgroundColor: 'white', zIndex: 999}
        ]}
      />
    )}
  </View>
);

技术原理

在 Android 平台上，ExoPlayer 使用 SurfaceView 或 TextureView 来渲染视频。在视频准备阶段：

1. 播放器初始化需要时间
2. 解码器准备需要时间
3. 网络缓冲需要时间（如果是远程视频）

在这期间，快门视图提供了一个占位显示。React Native Video 的 hideShutterView 属性在某些版本中可能存在兼容性问题，而直接控制 shutterColor 是更可靠的解决方案。

最佳实践

1. 对于简单场景，优先使用 shutterColor 属性
2. 对于需要精确控制加载状态的应用，采用状态控制方案
3. 注意防抖处理，避免快速切换导致的界面闪烁
4. 考虑添加加载指示器提升用户体验

版本兼容性说明

这个问题在不同版本中表现可能不同：

• 6.0.0-alpha.6 及之前版本：hideShutterView 工作正常
• 6.4.1 版本：hideShutterView 可能失效
• 6.4.3 及之后版本：官方确认已修复

建议开发者根据实际使用的版本选择合适的解决方案。