如何在使用Expo的本机中共享QRCode？

Question

我一直在尝试通过博览会的“共享”组件共享QRCode图像。我不确定如何在共享函数中提供QRCode图像。以下是我尝试运行的内容：

import React, {Component} from 'react';
import {Share, Button} from 'react-native';
import QRCode from 'react-native-qrcode-image';
import { connect } from 'react-redux';


class ShareExample extends Component {
  onShare = async () => {
    try {
    const uri = <QRCode value={'here is my code'}/>
      const result = await Share.share({
        message:'sharing',
        uri: uri
      });

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

  render() {
    return <Button onPress={this.onShare} title="Share" />;
  }
}

我最终收到Exception in HostFunction . . .警报。我应该能够传递具有Expo共享功能的图像二维码正确吗？

Answer 1

首先安装react-native-share。要安装它，您需要从expo中退出，因为coz expo不允许链接，因此建议始终使用裸反应本机coz expo这样复杂的功能有局限性。

然后尝试使用此伪代码：

import QRCode from 'react-native-qrcode-image';
import Share from 'react-native-share';



 constructor(props) {
    super(props);
    this.qrCode = '';
  }

  openShareScreen() {
    if (this.qrCode) {
      const shareOptions = {
        type: 'image/jpg',
        title: '',
        url: this.qrCode
      };
      Share.open(shareOptions)
        .then(res => console.log(res))
        .catch(err => console.error(err));
    }
  }

  render() {
    const { type, address } = this.state;
    return (
      <TouchableHighlight onPress={this.openShareScreen}>
        <View>
          <QRCode
            getBase64={base64 => {
              this.qrCode = base64;
            }}
            value={address}
            size={150}
            bgColor="#FFFFFF"
            fgColor="#000000"
          />
        </View>
      </TouchableHighlight>
    );
  }

这是kishan的很好回答，希望能有所帮助。如有疑问，请随时