React Native中视频垂直堆叠及合并导出为MP4的实现方案咨询

嗨，我来帮你搞定React Native里合并两个视频的需求～ 因为你提到V1和V2都是相同格式的MP4、16:9比例，这里分两种常见的合并场景给你方案，都用业内常用的react-native-ffmpeg库来实现：

一、顺序拼接（V1播放完自动播放V2） #

这种是最常见的“合并”需求，把两个视频首尾相接成一个长视频，因为两个视频编码格式一致，我们可以直接拷贝流，速度非常快：

步骤1：安装依赖 #

先安装FFmpeg库（如果需要完整滤镜支持，建议装full版本）：

npm install react-native-ffmpeg-full --save
# 或者用yarn
yarn add react-native-ffmpeg-full

新版本React Native会自动完成链接，旧版本可能需要手动执行react-native link react-native-ffmpeg-full。

步骤2：实现拼接逻辑 #

需要先创建一个文本文件列出要拼接的视频路径，再执行FFmpeg命令：

import RNFFmpeg from 'react-native-ffmpeg';
import RNFS from 'react-native-fs'; // 用来读写本地文件，需要先安装：npm install react-native-fs --save

const mergeVideosSequentially = async () => {
  // 这里替换成你实际获取到的V1、V2本地文件路径（比如从相册选择的路径）
  const v1Path = '/storage/emulated/0/Download/V1.mp4'; // Android示例路径
  // const v1Path = '/var/mobile/Containers/Data/Application/xxx/Documents/V1.mp4'; // iOS示例路径
  const v2Path = '/storage/emulated/0/Download/V2.mp4';
  const outputPath = `${RNFS.DocumentDirectoryPath}/merged_video.mp4`;
  const txtPath = `${RNFS.DocumentDirectoryPath}/videos.txt`;

  // 先写入拼接列表文件
  await RNFS.writeFile(txtPath, `file '${v1Path}'\nfile '${v2Path}'`, 'utf8');

  // 执行FFmpeg拼接命令
  const command = `-f concat -safe 0 -i ${txtPath} -c copy ${outputPath}`;
  const result = await RNFFmpeg.execute(command);

  if (result.returnCode === 0) {
    console.log('视频拼接成功！输出路径：', outputPath);
    // 这里可以添加保存到相册、分享等逻辑
  } else {
    console.error('拼接失败：', result);
  }
};

命令解释：

• -f concat：指定使用concat协议处理拼接
• -safe 0：允许使用绝对路径（避免路径权限报错）
• -c copy：直接复制视频/音频流，无需重新编码，速度快且无质量损失

二、垂直堆叠（两个视频上下同时显示） #

如果是要把两个16:9的视频上下叠放，最终得到9:16的竖屏视频，可以用FFmpeg的vstack滤镜：

实现逻辑 #

import RNFFmpeg from 'react-native-ffmpeg';
import RNFS from 'react-native-fs';

const stackVideosVertically = async () => {
  const v1Path = '/path/to/V1.mp4';
  const v2Path = '/path/to/V2.mp4';
  const outputPath = `${RNFS.DocumentDirectoryPath}/stacked_video.mp4`;

  // 执行垂直堆叠命令
  const command = `-i ${v1Path} -i ${v2Path} -filter_complex "[0:v][1:v]vstack=inputs=2[v]" -map "[v]" -map 0:a? -map 1:a? -c:v libx264 -crf 23 ${outputPath}`;
  const result = await RNFFmpeg.execute(command);

  if (result.returnCode === 0) {
    console.log('视频垂直堆叠成功！输出路径：', outputPath);
  } else {
    console.error('堆叠失败：', result);
  }
};

命令解释：

• -filter_complex "[0:v][1:v]vstack=inputs=2[v]"：把两个视频的视频流垂直堆叠，生成新的视频流[v]
• -map "[v]"：映射新生成的视频流到输出文件
• -map 0:a? -map 1:a?：如果原视频有音频，一并映射（?表示如果存在才处理）
• -c:v libx264 -crf 23：指定H.264编码器，crf 23是平衡质量和体积的默认参数

注意事项 #

• 权限配置：Android需要在AndroidManifest.xml中添加存储读写权限；iOS需要在Info.plist中添加相册访问权限（NSPhotoLibraryUsageDescription、NSPhotoLibraryAddUsageDescription）
• 文件路径：确保获取的视频路径是本地绝对路径，避免使用content://这类Uri，FFmpeg需要直接访问文件
• 性能：如果视频分辨率很高，垂直堆叠需要重新编码，可能会耗时较长，建议在后台执行并显示进度条

如果需要其他合并方式（比如水平堆叠、画中画），或者遇到权限、路径问题，随时问我哦～

备注：内容来源于stack exchange，提问作者Anno