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

问题背景

在使用 React Native Video 6.4.1 版本时，Android 平台上出现了一个黑屏显示问题。当视频加载时，会出现一个黑色遮罩层，即使设置了 hideShutterView 属性也无法消除这个现象。这个问题在从 6.0.0-alpha.6 版本升级后变得明显。

问题分析

这个黑屏实际上是 Android 平台上 ExoPlayer 的默认快门视图(Shutter View)。在理想情况下，设置 hideShutterView 属性应该能够隐藏这个视图，但在某些 Android 设备上（如 Note 20 Ultra），这个属性似乎失效了。

解决方案

官方推荐方案

1. 使用 shutterColor 属性
   可以直接将快门颜色设置为透明或其他颜色：

   <Video
     shutterColor={'transparent'}  // 完全透明
     // 或者
     shutterColor={'white'}        // 白色背景
   />
   

2. 确保使用最新版本
   在 6.4.3 版本中测试确认 hideShutterView 属性工作正常，建议升级到最新版本。

临时解决方案

如果上述方法不适用，可以使用以下 React Native 视图覆盖方案：

import { View, StyleSheet, Platform } from 'react-native';
import Video from 'react-native-video';
import debounce from 'lodash.debounce';

function VideoPlayer() {
  const [isLoaded, setIsLoaded] = useState(false);
  
  // 使用防抖函数延迟状态更新
  const debouncedOnLoad = useMemo(
    () => debounce(() => setIsLoaded(true), 200),
    []
  );

  return (
    <View style={{backgroundColor: 'white'}}>
      <Video
        onReadyForDisplay={debouncedOnLoad}
        hideShutterView
      />
      {/* Android 平台加载完成前显示白色覆盖层 */}
      {!isLoaded && Platform.OS === 'android' && (
        <View
          style={[
            StyleSheet.absoluteFillObject,
            { backgroundColor: 'white', zIndex: 9999 },
          ]}
        />
      )}
    </View>
  );
}

技术要点

1. 防抖处理的重要性
   即使使用 onReadyForDisplay 回调，Android 平台仍可能需要 20-200ms 的延迟才能完全隐藏快门视图。这是因为视图渲染和视频准备之间存在时间差。

2. 平台差异处理
   这个问题主要出现在 Android 平台，iOS 通常不需要特殊处理。使用 Platform.OS 检查可以确保代码的跨平台兼容性。

3. 层级管理
   覆盖层需要设置足够高的 zIndex 以确保它显示在视频视图上方，同时使用 absoluteFillObject 确保完全覆盖。

最佳实践建议

1. 始终优先尝试官方提供的属性解决方案
2. 对于关键视频播放场景，建议实现加载状态指示器
3. 考虑视频背景色与覆盖层颜色的协调性
4. 在组件卸载时记得清除防抖定时器

通过以上方法，开发者可以有效解决 React Native Video 在 Android 平台上的黑屏问题，提供更好的用户体验。