Question

我使用“ react-native-qrcode-svg”生成了QR码，我想通过电子邮件或使用react-native的“共享”模块共享该svg。

import { Share } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
render() {
    return (
        ....
        <QRCode
                color="#090909"
                value={this.props.myCode}
                size={150}
            />
       )
    }
....

 onPress = {()=>{
        Share.share({
             message: 'How I will send QR code image?'                          
             title: 'QR code',
        });
....

我想我需要获取svg文件句柄并将其设置为共享模块，但想查看示例代码。

Answer 1

解决方案。终于能够弄清楚如何共享二维码。

import QRCode from 'react-native-qrcode-svg';
 <QRCode
          value={JSON.stringify({test: 'testdata'})}
          getRef={c => (this.svg = c)}
        />
        <TouchableOpacity onPress={this.saveQRCode}>
          <View style={styles.instructions}>
            <Text>Share QR code</Text>
          </View>
        </TouchableOpacity>


saveQRCode = () => {
    this.svg.toDataURL(this.callback);
  };



callback(dataURL) {
    console.log(dataURL);
    let shareImageBase64 = {
      title: 'React Native',
      url: `data:image/png;base64,${dataURL}`,
      subject: 'Share Link', //  for email
    };
    Share.open(shareImageBase64).catch(error => console.log(error));
  }

Answer 2

我已经在我的项目中实现了它。它工作正常。请按照以下步骤操作

安装react-native-qrcode-image

npm install git+https://github.com/Kishanjvaghela/react-native-qrcode-image.git --save
安装react-native-share

npm install react-native-share --save
Link it with app

react-native link react-native-share

在组件中使用QRCode

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

class Dashboard extends React.Component {
  static navigationOptions = {
    title: Strings.dashboardTitle
  };

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

export default Dashboard;

Answer 3

您可以使用rn-qr-generator https://www.npmjs.com/package/rn-qr-generator通过给定值生成QRCode图像。它将返回一个uri和base64（如果添加了base64道具）。稍后，您可以使用react-native-share模块来共享base64图像数据。

Answer 4

您可以创建如下所示的变量来存储共享详细信息

 let shareImageBase64 = {
      title: "React Native",
      message: "Hola mundo",
      url: MY_ICON_SVG,
      subject: "Share Link" //  for email
    };

然后您可以在按下按钮或类似以下内容的同时调用它

<TouchableOpacity onPress={()=>{
          Share.open(shareImageBase64);
        }}>

在这里MY_ICON_SVG应该是base64。您可以使用此https://www.npmjs.com/package/react-native-convert-image-to-base64模块来创建这种图标形式的svg。

import ImgToBase64 from 'react-native-image-base64';

ImgToBase64.getBase64String('file://youfileurl', (err, base64string) => doSomethingWith(base64string));

我没有尝试过该模块。但是我认为，如果不浏览此https://github.com/react-native-community/react-native-svg/issues/212，这对您来说会有用的。

但是，如果其中任何一个都无法正常工作。您可以通过创建“ .png”文件qr代码而不是“ .svg”文件来实现，然后您可以使用前面提到的库i将库转换为base 64。

如何在React-Native中共享生成的QR代码？

4 个答案: