时间戳

首页 > 解决方案 > 使用 expo 在 React-Native 中共享屏幕截图

react-native - 使用 expo 在 React-Native 中共享屏幕截图

问题描述

我想分享一个屏幕的屏幕截图，但它返回一个错误，我不明白为什么。我使用 react-native-view-shot ，正如我在世博会文档中看到的那样。

如果有人可以帮助我使其工作，那将非常酷。非常感谢

const targetPixelCount = 1080;
const pixelRatio = PixelRatio.get();
const pixels = targetPixelCount / pixelRatio;

[...]

  onShare = async () => {
          try {
            const result = await takeSnapshotAsync(this.imageContainer, {
                  result: 'tmpfile',
                  height: pixels,
                  width: pixels,
                  quality: 1,
                  format: 'png',
                });
    
            if (result.action === Share.sharedAction) {
              if (result.activityType) {
                // shared with activity type of result.activityType
              } else {
                // shared
              }
            } else if (result.action === Share.dismissedAction) {
              // dismissed
            }
          } catch (error) {
            alert(error.message);
          }
        };

[...]

<TouchableOpacity
      style={styles.touchable2}
      onPress={this.onShare}
  >
   <Image
      source={require("../../assets/images/share.png")}
      style={styles.tripsimg2}
    />
  </TouchableOpacity>

在此处输入图像描述

更新编辑：使用@Hayden S. 回答后我做了：

onShare = async () => {
      try {
        const result = await captureScreen({
            format: "jpg",
            quality: 0.8
          }).then(
            uri => console.log("Image saved to", uri),
            error => console.error("Oops, snapshot failed", error)
          );
        if (result.action === Share.sharedAction) {
          if (result.activityType) {
            // shared with activity type of result.activityType
          } else {
            // shared
          }
        } else if (result.action === Share.dismissedAction) {
          // dismissed
        }
      } catch (error) {
        alert(error.message);
      }
    };

它返回： 在此处输入图像描述

标签： react-nativeexposcreenshotshare

解决方案

请确保您正确链接了软件包。

如果您的 react-native 版本低于 0.60，则需要使用

  react-native link react-native-view-shot

如果您使用高于 0.60 的 react-native，则需要确保 pod 安装正确。

  npx pod-install

另外，我建议您使用 captureScreen 而不是 takeSnapshotAsync。

import { captureScreen } from "react-native-view-shot";

captureScreen({
  format: "jpg",
  quality: 0.8
}).then(
  uri => console.log("Image saved to", uri),
  error => console.error("Oops, snapshot failed", error)
);

推荐阅读