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

Question

我想分享一个屏幕的屏幕截图，但 returns 出现错误，我不明白为什么。我使用的是 react-native-view-shot，正如我在 expo 文档中看到的那样。

如果有人能帮助我让它发挥作用，那就太好了。非常感谢

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

它returns :

Answer 1

请确保您正确链接了包。

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

  react-native link react-native-view-shot

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

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

Answer 2

最后，我做了一些与@Hayden S. 有点不同的事情。但是你帮了我很多，我为此感谢你。

也许这会对其他人有所帮助，所以我 post 我的代码 :

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>

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

Share a screenshot in React-Native using expo

share

screenshot

react-native

expo