分享二维码 React Native

Question

我是 react/react 本地人的新手。我正在尝试将 QR 码作为图像共享。 生成 QR 有效，但我想将其作为图片分享（whatsapp、蓝牙等）。

import QRCode from 'react-native-qrcode-svg';
let svg = useRef();
//let svg = '';

<QRCode
        size={300}
        value={`${name}`}
        getRef={(c) => (svg = c)}
/>

我尝试从官方文档中获取“获取二维码的 base64 字符串编码”，但我就是不明白

//From Off Doc
getDataURL() {
 this.svg.toDataURL(this.callback);
}

callback(dataURL) {
  console.log(dataURL);
}

我尝试做的事情（我所有的代码）：

import React, { useRef } from 'react';
import QRCode from 'react-native-qrcode-svg';
const QR = ({ name }: any) => {
   let svg = useRef();

 const getDataURL = () => {
   svg.toDataURL(callback(dataURL));
   //console.log(svg);
 }


 callback(dataURL) {
   console.log(dataURL);
 }

return (
    <>
        <QRCode
            size={300}
            value={`${name}`}
            getRef={(c) => (svg = c)}
        />

        
            
        <Button onPress={getDataURL}
            title="Call Funct"
            color="#1FAAE2" />
        
    </>
    
);

获取错误 svg.toDataURL 不是函数。我已经在这几天了，我还阅读了另一个具有相同问题的 stackover 查询，但这些问题的解决方案对我不起作用。提前谢谢大家

Error toDataURL

console.log(svg)

Answer 1

我更改了您的代码中的一些内容，并将其用于安装了 react-native-qrcode-svg 和 react-native-svg

的 expo 应用程序

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import { useRef } from "react";
import QRCode from "react-native-qrcode-svg";

const QR = ({ name }: any) => {
  let svg = useRef<SVG>(null);

  const getDataURL = () => {
    svg?.toDataURL(callback);
    //console.log(svg);
  };

  function callback(dataURL: string) {
    console.log(dataURL);
  }

  return (
    <>
      <QRCode size={300} value={`${name}`} getRef={(c) => (svg = c)} />

      <Button onPress={getDataURL} title="Call Funct" color="#1FAAE2" />
    </>
  );
};
export default function App() {
  const input = useRef<TextInput>(null);

  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
      <QR />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

代码的主要变化是将回调定义为函数

// you had 
 callback(dataURL) {
   console.log(dataURL);
 }
// but it should be
 function callback(dataURL) {
   console.log(dataURL);
 }
// or 
const callback = (dataURL) => {
   console.log(dataURL)
}

并在 getDataURL

上正确进行通话

// you had

   svg.toDataURL(callback(dataURL));

// but it should be
   svg.toDataURL(callback);

完成这些更改后，单击按钮 returns 控制台中的数据 URL 按预期显示。

问题编辑前的旧答案：

您的问题似乎是当您调用时未定义 svg svg.toDataURL您是如何调用该函数的？如果您在第一次渲染时这样做，则可能是 ref 尚未准备好。

如果您是在屏幕上的按钮中使用回调来执行此操作，那么问题应该出在设置引用的代码上。

你能post你的整个组件吗？

分享二维码 React Native

Share QR React Native

javascript

base64

qr-code

reactjs

react-native