如何在 React-Native 中共享生成的二维码？

Question

我使用“react-native-qrcode-svg”生成了二维码，我想通过电子邮件或类似的方式使用 react-native 的 Share 模块分享这个 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

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

 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”文件二维码而不是“.svg”文件来完成此操作，然后您可以使用之前提到的库 i 将其转换为 Base 64。