如何在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文件句柄并将其设置为share模块，但希望看到示例代码。

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

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

1. install react-native-qrcode-image

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

1. Install react-native-share

npm install react-native-share --save

1. Link it with app

react-native link react-native-share

1. 在组件中使用QRCode

从‘react-native- QRCode -qrcode’导入图像；从‘react-native- Share’导入共享；类仪表板扩展React.Component { navigationOptions ={navigationOptions: Strings.dashboardTitle }；构造函数(Props){ super(props)；this.qrCode = ''；} openShareScreen() { if ( this.qrCode ) { const shareOptions ={ type：'image/jpg'，标题：''，url: this.qrCode }；Share.open(shareOptions) .then(res => console.log(res)) .catch(err => console.error(err))；}} render() { const {类型，地址}= this.state；return ( { this.qrCode = base64；}} value={address} size={150} bgColor="#FFFFFF“fgColor="#000000”/> )；}}导出默认仪表板；

Answer 3

您可以使用rn-qr-generator模块(https://www.npmjs.com/package/rn-qr-generator)。您需要将value传递给库，它将返回生成的QRCode的uri和base64数据

import RNQRGenerator from 'rn-qr-generator';

componentDidMount() {
    RNQRGenerator.generate({
      value: 'otpauth://totp/Example:alice@google.com?secret=JBSWY3DPEHPK3PXP&issuer=Example', // required
      height: 300,
      width: 300,
      base64: false, // default 'false'
      backgroundColor: 'black', // default 'white'
      color: 'white', // default 'black'
    })
      .then(response => {
        const { uri, width, height, base64 } = response;
        this.setState({ imageUri: uri });
      })
      .catch(error => console.log('Cannot create QR code', error));
  }

然后，您可以使用react-native-share来共享图像