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

问题背景

在使用 React Native Video 组件时，Android 平台上可能会出现视频加载时出现黑屏的问题。这个问题在 6.4.1 版本中被报告，主要表现为即使设置了 hideShutterView 属性，仍然会在视频加载时显示黑色背景。

问题分析

这个问题的根源在于 Android 平台的 ExoPlayer 实现。在视频加载过程中，播放器会默认显示一个"快门视图"(shutter view)，这个视图通常表现为黑色背景。虽然组件提供了 hideShutterView 属性来控制这个行为，但在某些情况下可能不会按预期工作。

解决方案

方法一：使用 shutterColor 属性

React Native Video 组件提供了一个 shutterColor 属性，可以用来设置快门视图的颜色。我们可以将其设置为透明色来避免黑屏问题：

<Video
  source={{uri: 'your-video-uri'}}
  shutterColor={'transparent'}
  // 其他属性...
/>

如果希望背景显示为白色，也可以直接设置为白色：

<Video
  source={{uri: 'your-video-uri'}}
  shutterColor={'white'}
  // 其他属性...
/>

方法二：使用覆盖层方案

如果 shutterColor 属性不能满足需求，可以采用覆盖层方案。这种方案通过添加一个临时的视图覆盖在视频上方，直到视频完全加载：

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

function VideoPlayer() {
  const [isLoaded, setIsLoaded] = useState(false);
  
  const debouncedOnLoad = useMemo(
    () => debounce(() => setIsLoaded(true), 200),
    []
  );

  return (
    <View style={{ flex: 1 }}>
      <Video
        source={{uri: 'your-video-uri'}}
        onLoad={debouncedOnLoad}
        hideShutterView
        // 其他视频属性...
      />
      {!isLoaded && Platform.OS === 'android' && (
        <View
          style={[
            StyleSheet.absoluteFillObject,
            { backgroundColor: 'white', zIndex: 9999 },
          ]}
        />
      )}
    </View>
  );
}

这个方案的关键点：

1. 使用 debounce 函数延迟加载状态的更新
2. 在视频加载完成前显示一个白色覆盖层
3. 确保覆盖层位于视频上方(zIndex)

最佳实践建议

1. 版本选择：确保使用最新版本的 React Native Video，已知 6.4.3 版本中 hideShutterView 工作正常。

2. 属性组合：可以同时使用 hideShutterView 和 shutterColor 属性以获得最佳效果。

3. 加载优化：对于白色背景的视频，建议直接使用 shutterColor={'white'} 方案，性能更好。

4. 测试验证：在不同 Android 设备和版本上进行测试，确保解决方案的兼容性。

总结

React Native Video 在 Android 平台上的黑屏问题可以通过多种方式解决。最简单的方法是使用 shutterColor 属性直接设置快门视图颜色。对于更复杂的需求，可以采用覆盖层方案。开发者应根据具体场景选择最适合的解决方案，并在实际设备上进行充分测试。