React Native实现视频点击播放前显示预览缩略图方法

你当前使用的expo-av+expo-video-player依赖完全覆盖该需求，不需要额外安装第三方组件，根据你的preview_video资源类型选对应实现即可：

静态缩略图预览（性能最优，适配预览资源为封面图的场景） #

核心逻辑是在视频播放组件上层绝对定位叠放预览缩略图，初始状态下禁止正片自动播放，用户点击预览层触发正片播放后，隐藏预览层即可。

• 初始给视频组件设置shouldPlay: false，避免进入页面就加载播放正片
• 用TouchableOpacity包裹预览缩略图作为点击触发区域，可自定义叠加播放按钮样式
• 点击后更新状态隐藏预览层，调用视频实例的playAsync方法启动正片播放

动态短视频预览（适配预览资源为几秒短预览视频的场景） #

核心逻辑是初始加载体积更小的预览短视频资源，设置为静音、循环播放、隐藏控制条，用户点击后平滑切换为完整正片资源，开启声音和播放控制即可。

• 预览视频建议提前压缩到2MB以内，避免和正片重复占用带宽
• 切换资源时可加200ms左右的透明度过渡，避免画面跳变
• 如果不需要自定义交互，也可以直接利用expo-video-player自带的poster参数传入缩略图地址，组件会自动在视频加载完成前展示封面，点击播放后自动隐藏，适合简单场景。

现有代码改造示例 #

import { Video } from 'expo-av';
import VideoPlayer from 'expo-video-player';
import * as React from "react";
import {View, Image, TouchableOpacity, StyleSheet} from "react-native";
import Header from "../../components/header/Header";

export default function VideoPlayerComponent(props) {
  // 从路由参数取正片地址、预览图/预览视频地址
  const { url, previewResource } = props.route.params;
  const [showPreview, setShowPreview] = React.useState(true);
  const videoPlayerRef = React.useRef(null);

  const handlePlayFullVideo = async () => {
    setShowPreview(false);
    // 触发正片播放
    await videoPlayerRef.current?.playAsync();
  };

  return (
    <View>
      <Header title="Video" goBack />
      <View style={{height: 550}}>
        <VideoPlayer
          ref={videoPlayerRef}
          style={styles.fullVideo}
          videoProps={{
            shouldPlay: false,
            resizeMode: Video.RESIZE_MODE_CONTAIN,
            source: { uri: url },
          }}
        />
        {/* 预览层 */}
        {showPreview && (
          <TouchableOpacity
            activeOpacity={0.9}
            style={styles.previewWrap}
            onPress={handlePlayFullVideo}
          >
            <Image
              source={{ uri: previewResource }}
              style={styles.previewMedia}
              resizeMode="cover"
            />
            {/* 自定义居中播放按钮 */}
            <View style={styles.playIcon}>
              {/* 引入你项目里的播放图标组件替换这里即可 */}
            </View>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  fullVideo: {
    width: '100%',
    height: '100%'
  },
  previewWrap: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center'
  },
  previewMedia: {
    position: 'absolute',
    width: '100%',
    height: '100%'
  },
  playIcon: {
    width: 64,
    height: 64,
    borderRadius: 32,
    backgroundColor: 'rgba(0,0,0,0.6)',
    justifyContent: 'center',
    alignItems: 'center'
  }
});

小提示：如果你的preview_video是短动态视频，只需要把示例里预览层的Image组件替换为expo-av的Video组件，设置shouldPlay: true、isMuted: true、isLooping: true即可，不需要额外引入其他依赖。如果想进一步减少开发量，直接给VideoPlayer组件传入poster={{ uri: previewResource }}属性，组件会内置实现加载前封面展示逻辑，点击播放后自动隐藏封面。

内容的提问来源于stack exchange，提问作者Alexandra Didenco