android React Native Expo共享-无法第二次共享

6vl6ewon  于 2023-03-06  发布在  Android
关注(0)|答案(1)|浏览(112)

我正在使用https://docs.expo.dev/versions/latest/sdk/sharing/创建与当前屏幕截图共享按钮。
这是我的代码片段,运行良好。

import ViewShot from "react-native-view-shot";
import * as Sharing from "expo-sharing";
const viewShot = React.useRef();
let captureAndShareScreenshot = () => {
    try {
      viewShot.current.capture().then((uri) => {
        console.log("do something with ", uri);
        const options = {
          mimeType: 'image/jpeg',
          dialogTitle: "Check Awesome quotes Check Awesome quotesCheck Awesome quotesCheck Awesome quotesCheck Awesome quotesCheck Awesome quotesCheck Awesome quotesCheck Awesome quotesCheck Awesome quotesCheck Awesome quotesCheck Awesome quotesCheck Awesome quotesCheck Awesome quotes",
        };
       
          Sharing.shareAsync("file://" + uri, options); // this is causing error for second time share
         
      }), (error) => console.error("Oops, snapshot failed", error);
    } catch (e) {
      console.log(e);
    }

  };

 <ViewShot style={styles.container} ref={viewShot} options={{ format: "jpg", quality: 0.9, }}>
  <TouchableOpacity style={styles.bubbleIcons} onPress={captureAndShareScreenshot} >
          <Image source={require("./assets/share.png")} style={styles.iconImage} />
  </TouchableOpacity >
 </ViewShot>

唯一的问题是,一旦屏幕截图被共享,然后回到应用程序后,再次共享时,它会给出错误

Possible Unhandled Promise Rejection (id: 1):
Error: Call to function 'ExpoSharing.shareAsync' has been rejected.
→ Caused by: Another share request is being processed now.
Error: Call to function 'ExpoSharing.shareAsync' has been rejected.
→ Caused by: Another share request is being processed now.

文档中没有任何内容可用于取消当前请求或检查首次共享是否成功。

eeq64g8w

eeq64g8w1#

example对我来说就像预期的那样工作。

import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import { Asset } from 'expo-asset';
import * as FileSystem from 'expo-file-system';
import * as Sharing from 'expo-sharing';
import Button from '../components/Button';

// https://www.deviantart.com/squishypanda96/art/ceci-n-est-pas-un-chapeau-296137053
const image = require('../../assets/images/chapeau.png');

export default class SharingScreen extends React.Component {
  static navigationOptions = {
    title: 'Sharing',
  };

  state = {
    loading: true,
    isAvailable: false,
  };

  componentDidMount() {
    Sharing.isAvailableAsync().then(isAvailable =>
      this.setState({ isAvailable, loading: false })
    );
  }

  _shareLocalImage = async () => {
    const asset = Asset.fromModule(image);
    await asset.downloadAsync();
    const tmpFile = FileSystem.cacheDirectory + 'chapeau.png';

    try {
      // sharing only works with `file://` urls on Android so we need to copy it out of assets
      await FileSystem.copyAsync({ from: asset.localUri!, to: tmpFile });
      await Sharing.shareAsync(tmpFile, {
        dialogTitle: 'Is it a snake or a hat?',
      });
    } catch (e) {
      console.error(e);
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Image source={image} style={styles.image} resizeMode="contain" />
        <Button
          onPress={this._shareLocalImage}
          title="Share local image"
          disabled={!this.state.isAvailable}
          loading={this.state.loading}
        />
        {!this.state.isAvailable && !this.state.loading && (
          <Text>Sharing functionality is not available on this platform.</Text>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 40,
  },
  image: {
    marginBottom: 30,
    width: '100%',
    flex: 1,
  },
});

相关问题