如何在组件中展示react-native-image-crop-picker拍摄视频的预览图

方案1：直接使用react-native-image-crop-picker返回的默认封面 #

这个库在你选择/拍摄视频后，返回的结果对象中默认会携带首帧封面的本地路径，无需额外处理：

• 调用拍摄接口时按如下配置即可：

import ImageCropPicker from 'react-native-image-crop-picker';

// 拍摄视频
ImageCropPicker.openCamera({
  mediaType: 'video',
  // 可选配置：视频最大时长、压缩质量等
  durationLimit: 30,
  compressVideoPreset: 'MediumQuality',
}).then(videoResult => {
  // 封面路径就在返回对象的 *thumbnailPath* 字段中
  console.log('视频封面本地路径：', videoResult.thumbnailPath);
  // 把这个路径存到state里供组件渲染用
  this.setState({ videoThumbnail: videoResult.thumbnailPath });
});

• 渲染封面直接用RN自带的Image组件即可：

import { Image } from 'react-native';

// 组件渲染部分
<Image 
  source={{ uri: this.state.videoThumbnail }}
  style={{ width: 300, height: 200, resizeMode: 'cover' }}
/>

方案2：自定义截取视频指定帧作为封面 #

如果你需要截取非首帧的位置作为封面，可以借助react-native-thumbnail库实现：

• 先安装依赖后执行以下代码生成指定帧的封面：

import RNThumbnail from 'react-native-thumbnail';

// videoPath是你之前拿到的视频本地路径，第二个参数是要截取的时间点（单位秒）
RNThumbnail.get(videoPath, 10).then(result => {
  // result.path就是生成的第10秒的封面本地路径
  this.setState({ customThumbnail: result.path });
});

• 渲染方式和方案1一致，直接用Image组件加载路径即可。

注意事项 #

• 本地路径加载不需要额外加协议头，安卓和iOS的本地临时路径均可直接被Image组件识别
• 如果需要长期保存封面，建议将生成的封面文件移动到应用的持久化存储目录，避免临时目录被系统自动清理
• 安卓端需要提前申请读写存储权限，iOS端需要申请相册/相机访问权限，否则无法读取生成的封面文件

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