使用expo在React-Native中分享屏幕截图

问题描述

我想共享一个屏幕的屏幕截图，但是它返回一个错误，我不知道为什么。 我使用了expo文档中看到的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);
      }
    };

它返回：

解决方法

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

如果您的本机版本低于0.60，则需要使用

  react-native link react-native-view-shot

如果您使用的反应本色高于0.60，则需要确保吊舱安装正确。

  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)
);

,

最后，我做了一些与您@Hayden S.的方式有所不同的事情，但是您为我提供了很多帮助，对此我表示感谢。

也许对其他人有帮助，所以我发布了我的代码：

openShareDialogAsync = async () => {
      if (!(await Sharing.isAvailableAsync())) {
        alert(`Uh oh,sharing isn't available on your platform`);
        return;
      }
      captureRef(this._shareViewContainer,{
        // defaults
      }).then(
        uri => {
          console.log('Image saved to',uri);
          Sharing.shareAsync(uri);
        },error =>
          console.error('Oops,snapshot failed',error)
      );
    };

[...]

  <View style={{ width: "100%",height: height }}
              collapsable={false}
              ref={view => {
              this._shareViewContainer = view;
          }}>
     <TouchableOpacity
        style={styles.touchable2}
        onPress={this.openShareDialogAsync}
      >
      <Image
        source={require("../../assets/images/share.png")}
         style={styles.tripsimg2}
      />
    </TouchableOpacity>