react-native-video安卓端列表滚动时视频控件跟随滚动问题

问题现象 #

iOS端视频播放功能正常，安卓端存在两个异常：

• 视频加载完成后显示空白区域，需点击区域才会唤起播放控件
• 点击控件开始播放后，滚动列表时，控件会跟随页面滚动一段距离后才消失，期望滚动时控件立即隐藏

已尝试react-native-video及react-native-media-controls的多种属性和方法，且遵循安卓安装文档，但问题未解决。

当前使用代码 #

<Video
  controls={true}
  resizeMode="cover"
  source={{uri: item.image}} // Can be a URL or a local file.
  playInBackground={false}
  repeat={false}
  paused={true}
  playWhenInactive={false}
  style={{
    width: width * 0.86,
    height: height * 0.3,
    borderRadius: 12,
    alignSelf: 'center',
    marginTop: previewMode ? width * 0.05 : 0,
  }}
/>

解决方案 #

1. 修复视频加载后空白、控件不显示问题 #

安卓原生VideoView默认可能不会自动渲染控件，可通过以下方式处理：

• 添加preload="auto"属性，强制视频预加载元数据，确保加载完成后触发控件渲染
• 若使用自定义控件，监听onLoad事件，加载完成后手动触发控件显示
• 检查安卓Manifest文件，确保android:hardwareAccelerated="true"已开启（默认开启，若被关闭需重新开启）

修改后代码示例：

<Video
  controls={true}
  resizeMode="cover"
  source={{uri: item.image}}
  playInBackground={false}
  repeat={false}
  paused={true}
  playWhenInactive={false}
  preload="auto" // 新增预加载配置
  style={{
    width: width * 0.86,
    height: height * 0.3,
    borderRadius: 12,
    alignSelf: 'center',
    marginTop: previewMode ? width * 0.05 : 0,
  }}
/>

2. 修复滚动时控件延迟消失问题 #

核心是监听列表滚动事件，一旦触发滚动立即控制控件隐藏或暂停视频：

• 给FlatList/ScrollView添加onScroll事件，设置scrollEventThrottle={16}确保事件实时触发
• 通过ref获取Video实例，滚动时调用pause()自动隐藏原生控件；若用自定义控件，直接修改状态隐藏

示例代码：

import { useRef } from 'react';
import { FlatList } from 'react-native';
import Video from 'react-native-video';

// ...

const videoRef = useRef(null);

// 滚动回调：立即暂停视频并隐藏控件
const handleScroll = () => {
  videoRef.current?.pause();
};

// 列表组件配置
<FlatList
  data={yourDataList}
  renderItem={({item}) => (
    <Video
      ref={videoRef}
      controls={true}
      resizeMode="cover"
      source={{uri: item.image}}
      playInBackground={false}
      repeat={false}
      paused={true}
      playWhenInactive={false}
      preload="auto"
      style={{
        width: width * 0.86,
        height: height * 0.3,
        borderRadius: 12,
        alignSelf: 'center',
        marginTop: previewMode ? width * 0.05 : 0,
      }}
    />
  )}
  onScroll={handleScroll}
  scrollEventThrottle={16} // 确保滚动事件及时触发
/>

若使用react-native-media-controls，可通过状态直接控制控件显隐：

import { useState } from 'react';
import MediaControls from 'react-native-media-controls';

// ...

const [controlsVisible, setControlsVisible] = useState(true);

const handleScroll = () => {
  setControlsVisible(false);
};

// 结合MediaControls使用
<MediaControls
  isVisible={controlsVisible}
  // 其他控件配置...
/>

额外优化建议 #

安卓端给Video设置borderRadius可能导致渲染异常，建议用View包裹Video，给View设置borderRadius和overflow: 'hidden'：

<View style={{
  width: width * 0.86,
  height: height * 0.3,
  borderRadius: 12,
  alignSelf: 'center',
  marginTop: previewMode ? width * 0.05 : 0,
  overflow: 'hidden'
}}>
  <Video
    controls={true}
    resizeMode="cover"
    source={{uri: item.image}}
    // 其他属性...
    style={{width: '100%', height: '100%'}}
  />
</View>

内容的提问来源于stack exchange，提问作者deepanshi gupta