如何实现React Native应用或组件的录屏功能？求类似react-native-view-shot的方案

一、全局应用录屏 #

1. 原生API实现 #

• iOS: 直接使用系统ReplayKit框架，通过RPScreenRecorder类控制录屏启停，录屏文件默认保存到相册，也可指定存储路径，无需额外依赖。
• Android: 调用MediaProjection API，需先引导用户授权录屏权限，通过MediaProjectionManager获取录屏会话，结合MediaRecorder完成视频编码与存储。

2. 第三方库快速实现 #

推荐使用成熟的第三方库减少原生开发成本，比如react-native-screen-recorder：

• 安装命令：npm install react-native-screen-recorder --save
• 基础使用示例：

import ScreenRecorder from 'react-native-screen-recorder';

// 启动录屏
const startRecording = async () => {
  try {
    await ScreenRecorder.start({
      width: 720,
      height: 1280,
      bitrate: 6000000, // 比特率越高视频质量越好
    });
  } catch (error) {
    console.error('录屏启动失败:', error);
  }
};

// 停止录屏并获取视频路径
const stopRecording = async () => {
  try {
    const videoPath = await ScreenRecorder.stop();
    console.log('录屏文件已保存至:', videoPath);
  } catch (error) {
    console.error('录屏停止失败:', error);
  }
};

二、组件级录屏（类似react-native-view-shot的截图逻辑） #

要实现单个View或组件的录屏，核心是持续捕获组件帧画面并合成为视频，以下两种方案可直接使用：

1. react-native-view-shot + 视频合成 #

利用react-native-view-shot定期捕获组件截图，再通过视频处理库将截图序列合成视频：

• 安装依赖：npm install react-native-view-shot react-native-video-processing react-native-fs --save
• 实现代码：

import ViewShot from 'react-native-view-shot';
import VideoProcessing from 'react-native-video-processing';
import RNFS from 'react-native-fs';

let viewShotRef = null;
let frameTimer = null;
const frameList = [];

// 开始组件录屏
const startComponentRecord = () => {
  // 每100ms捕获一帧（对应10fps，可按需调整）
  frameTimer = setInterval(async () => {
    if (viewShotRef) {
      const frameUri = await viewShotRef.capture({ format: 'jpg', quality: 0.8 });
      frameList.push(frameUri);
    }
  }, 100);
};

// 停止录屏并合成视频
const stopComponentRecord = async () => {
  clearInterval(frameTimer);
  try {
    const outputPath = `${RNFS.DocumentDirectoryPath}/component-record.mp4`;
    const videoUri = await VideoProcessing.createVideoFromImages({
      images: frameList,
      fps: 10,
      outputPath,
    });
    console.log('组件录屏视频路径:', videoUri);
    // 清空帧列表释放内存
    frameList.length = 0;
  } catch (error) {
    console.error('视频合成失败:', error);
  }
};

// 渲染目标组件
return (
  <ViewShot ref={ref => viewShotRef = ref}>
    <View style={{ width: 300, height: 300, backgroundColor: '#2196F3' }}>
      <Text style={{ color: 'white', fontSize: 20 }}>需要录屏的组件内容</Text>
    </View>
  </ViewShot>
);

2. 专用组件录屏库 #

使用react-native-view-recorder，专为组件录屏场景封装，无需手动处理帧捕获与合成：

• 安装命令：npm install react-native-view-recorder --save
• 基础使用：

import ViewRecorder from 'react-native-view-recorder';

let targetComponentRef = null;

// 启动组件录屏
const startRecord = () => {
  ViewRecorder.startRecording({
    viewRef: targetComponentRef,
    fps: 15,
    bitrate: 2000000,
  });
};

// 停止录屏
const stopRecord = async () => {
  const videoUri = await ViewRecorder.stopRecording();
  console.log('组件录屏完成，路径:', videoUri);
};

// 渲染目标组件
return (
  <View ref={ref => targetComponentRef = ref} style={{ padding: 20 }}>
    {/* 这里放入需要录屏的组件 */}
    <Text>示例组件内容</Text>
  </View>
);

三、关键注意事项 #

• 权限配置: iOS需在Info.plist中添加NSPhotoLibraryAddUsageDescription（相册访问）和NSMicrophoneUsageDescription（如需录声）；Android需在AndroidManifest.xml中声明RECORD_AUDIO、WRITE_EXTERNAL_STORAGE权限，并动态申请录屏权限。
• 性能优化: 组件录屏会频繁触发画面捕获，建议根据需求调整帧率，避免过高帧率导致内存占用飙升。
• 兼容性: 不同RN版本、设备系统可能存在兼容性差异，测试时覆盖主流机型与系统版本。

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