如何在 react native expo 上分享二维码？答案

【问题标题】：How to share QR code on react native expo?如何在 react native expo 上分享二维码？
【发布时间】：2021-04-14 07:23:29
【问题描述】：

我正在创建一个应用程序来生成二维码，然后在社交媒体上分享它。目前，我设法创建了二维码，但是，我在将生成的代码作为图像共享时迷失了方向。我正在使用小吃博览会来构建应用程序。有人可以告诉我shareQR功能在哪一部分做错了吗？感谢您的帮助。

import React, { useState } from 'react';
import {StyleSheet, Text, ScrollView, TextInput, TouchableOpacity, Alert, View, Share} from 'react-native';
import QRCode from 'react-native-qrcode-svg';

export default function App() {
  const shareQr =()  =>{
    QRCode.svg.toDataURL((link) => {
      const shareImageBase64 = {
        title: "QR",
        message: "It's a QR code",
        url: `data:image/png;base64,${link}`
      };
      Share.open(shareImageBase64);
    })};

  const [qr, setQr] = useState(false);
  const [link, setLink] = useState('');

  const createQr = () => {
    if (link) {
      setQr(true);

    } else {
      Alert.alert(
        'Error',
        "Please insert required field"
      );
    }
  };

  return (
    <ScrollView style={styles.container}>
        <Text style={styles.headerTitle}>Create QR Code</Text>
          <View style={{flexDirection:'row'}}>
            <TextInput
              style={styles.input}
              placeholder="Insert link here.."
              onChangeText={(link) => setLink(link)}
            />
          </View>
        <TouchableOpacity style={styles.button} onPress={() => createQr()}>
          <Text style={styles.buttonTitle}>Create</Text>
        </TouchableOpacity>
        {qr && (
          <View style={styles.qrcontainer}>
              <QRCode value={link} size={250} />
              <Text
                style={{
                  alignSelf: 'center',
                  fontSize: 15
                }}>
                {link}
              </Text>
          </View>
        )}
        {qr && (
          <View>
          <TouchableOpacity style={styles.button} onPress={() => shareQr()}>
            <Text style={styles.buttonTitle}>Share QR Code</Text>
            </TouchableOpacity>
          </View>
        )}
      </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 40,
    paddingHorizontal: 10,
  },
  headerTitle: {
    fontSize: 30,
    color: 'black',
    marginBottom: 10
  },
  input: {
    backgroundColor: 'white',
    marginVertical: 5,
    borderRadius: 5,
    padding: 5,
    flex:1
  },
  buttonTitle:{
    alignSelf: 'center',
    fontSize: 18,
    marginVertical: 5,
  },
  button: {
    borderRadius: 6,
    backgroundColor: 'lightyellow',
    marginVertical: 5
  },
  qrcontainer: {
    alignItems: 'center',
  },
});

上面的代码可以直接用在snack的app.js上进行测试。任何帮助将不胜感激。

【问题讨论】：

您是否获得了生成的QRCode 的base64 图像网址？如果您成功获得该图像，那么有一种方法可以共享该图像
在我看来，二维码模块应该已经能够提供base64 url

标签： react-native expo qr-code

【解决方案1】：

您应该使用“npm i rn-qr-generator”。启用base64字符串然后分享

RNQRGenerator.generate({
                value: response.link,
                height: 140,
                width: 140,
                base64: true
            })
                .then(response => {
                    const { uri, width, height, base64 } = response;
                    console.log("64" + base64)
                    setQrImage(uri)
                    setQrImageData(base64)
                })
                .catch(error => console.log('Cannot create QR code', error));

const shareImageBase64 = {
        title: "QR",
        message: "It's a QR code",
        url: `data:image/png;base64,${StrinBase64}`
      };
      Share.open(shareImageBase64);

【讨论】：