Expo React Native SDK52截图异常：捕获屏幕/视图失败报错

问题现象 #

在Expo SDK52中使用react-native-view-shot实现截图时出现两类错误：

• 调用captureRef捕获指定视图时，报错[Error: Failed to snapshot view tag XXXXX]（XXXXX为随机数值）
• 调用captureScreen全屏截图时，报错[Error: Failed to snapshot view tag -1]

核心原因 #

react-native-view-shot@4.0.3与Expo SDK52对应的React Native 0.76.x版本存在兼容性问题，无法正确识别视图标签；同时Expo官方目前推荐使用自有维护的expo-screenshot库实现截图功能，原文档示例可能未及时更新。

解决方案 #

方案1：替换为Expo官方expo-screenshot库（推荐） #

使用Expo原生支持的截图库，兼容性更稳定，步骤如下：

1. 安装依赖

npx expo install expo-screenshot

2. 修改App.js代码
   替换原有react-native-view-shot的API为expo-screenshot，同时完善权限申请流程：

import { StatusBar } from "expo-status-bar";
import { useRef, useState } from "react";
import { Button, Text, StyleSheet, View } from "react-native";
import * as Screenshot from 'expo-screenshot';
import * as MediaLibrary from 'expo-media-library';

export default function App() {
  const imageRef = useRef(null);
  const [localUri, setLocalUri] = useState("");

  // 捕获指定视图截图
  const handleViewScreenshot = async () => {
    try {
      // 请求媒体库权限
      const { status } = await MediaLibrary.requestPermissionsAsync();
      if (status !== 'granted') {
        setLocalUri("需要媒体库权限才能保存截图");
        return;
      }

      if (!imageRef.current) {
        setLocalUri("视图引用不存在");
        return;
      }

      const uri = await Screenshot.takeSnapshotAsync(imageRef.current, {
        height: 440,
        quality: 1,
      });
      // 可选：保存截图到系统相册
      await MediaLibrary.saveToLibraryAsync(uri);
      setLocalUri(uri);
    } catch (error) {
      setLocalUri(`${error}`);
    }
  };

  // 全屏截图
  const handleCompleteScreenshot = async () => {
    try {
      const { status } = await MediaLibrary.requestPermissionsAsync();
      if (status !== 'granted') {
        setLocalUri("需要媒体库权限才能保存截图");
        return;
      }

      // 传入null表示捕获全屏
      const uri = await Screenshot.takeSnapshotAsync(null, {
        format: "jpg",
        quality: 0.8,
      });
      await MediaLibrary.saveToLibraryAsync(uri);
      setLocalUri(uri);
    } catch (error) {
      setLocalUri(`Oops, snapshot failed ${error}`);
    }
  };

  return (
    <View style={styles.container}>
      <View ref={imageRef} collapsable={false} style={styles.box}></View>
      <Text>URI : {localUri}</Text>
      <Button title="Take Screenshot" onPress={handleViewScreenshot} />
      <Button title="Take Complete Screenshot" onPress={handleCompleteScreenshot} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
    width: "85%",
    borderRadius: 20,
    marginBottom: 30,
    aspectRatio: 1 / 1.5,
    backgroundColor: "green",
  },
});

3. 清理冗余依赖（可选）
   移除不再需要的react-native-view-shot：

npm uninstall react-native-view-shot

方案2：修复react-native-view-shot兼容性（不推荐） #

若坚持使用第三方库，可尝试以下操作：

• 升级到最新兼容版本：

npm install react-native-view-shot@latest

• 清除Expo缓存并重启开发服务器：

npx expo start --clear

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