Share QR React Native

Question

我是react/react native的新手。我想分享一个二维码作为图像。生成QR作品，但是我想分享作为图片(whatsapp，蓝牙等)。

import QRCode from 'react-native-qrcode-svg';
let svg = useRef();
//let svg = '';
<QRCode
size={300}
value={`${name}`}
getRef={(c) => (svg = c)}
/>

我试了">得到qrcode的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不是一个函数．我已经在这几天了，我也读了另一个具有相同问题的堆栈查询，但这些问题的解决方案对我不起作用。提前谢谢大家

错误toDataURL

console.log (svg)

Answer 1

我在你的代码中改变了一些东西，并在一个博览会应用程序上使用它，我安装了react-native-qrcode-svg和react-native-svg

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

在这些更改之后，单击按钮将返回控制台中预期的dataURL。

---

问题前的旧答案编辑:

你的问题似乎是svg没有定义当你调用svg.toDataURL你是如何调用函数的?如果你在第一次渲染时这样做，那么ref可能还没有准备好。

如果你在屏幕上的一个按钮中使用回调，那么问题应该是围绕代码设置ref.

你能张贴你的整个组件吗?

Answer 2

我对typescript的解决方案:我需要添加
'//@ts-ignore'，因为我使用了typescript

import React,  { useRef } from 'react';
import QRCode from 'react-native-qrcode-svg';
import { TouchableOpacity, Text } from 'react-native';
export const Screen1 = ( ) => { 
const svg = useRef();
const getDataURL = () => {
// @ts-ignore
svg.current?.toDataURL(callback);
};
const callback = (dataURL: string) => {
console.log( dataURL );
}
return (
<>
<QRCode
value={ "Some String"  }
size={ 250 }
color="black"
backgroundColor="white"
getRef={(c: any) => ( svg.current = c )}
/>
<TouchableOpacity 
activeOpacity={ 0.8 }
style={ styles.Button }
onPress={() => getDataURL() }
>
<Text style={ styles.Text }> Press </Text>
</TouchableOpacity>
</>

)

Answer 3

你得到的功能没有发现错误，当你测试它与web，测试它与iOS模拟器，然后它将工作。