reactjs 分享QR React原生

d4so4syb 于 2023-01-17 发布在 React

关注(0)|答案(3)|浏览(144)

我是react/react native的新手。我正在尝试将QR码共享为图像。生成QR可以，但**我想将其共享为图像（whatsapp，蓝牙等）。

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

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

我尝试从官方文档中获取“get base64 string encode of the qrcode”，但我就是不明白

//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不是一个函数。我已经在这几天了，我也读了另一个堆栈查询相同的问题，但解决这些问题没有为我工作。提前感谢你们的家伙
Error toDataURL
console.log(svg)

reactjs

来源：https://stackoverflow.com/questions/72365270/share-qr-react-native

3条答案

按热度按时间

zed5wv101#

我已经更改了代码中的一些内容，并将其用于安装了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);

更改后，单击按钮将在控制台中返回预期的dataURL。
问题编辑前的旧答案：
你的问题似乎是当你调用svg.toDataURL的时候svg没有被定义，你是怎么调用这个函数的？如果你在第一次渲染的时候就这么做了，那可能是ref还没有准备好。
如果您使用屏幕按钮中的回调来执行此操作，则问题应该围绕设置引用的代码。
你能把你的整个组件都寄出去吗？

赞(0）回复(0）举报 2023-01-17

vm0i2vca2#

我的 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>
    </>

)

赞(0）回复(0）举报 2023-01-17

iqih9akk3#

当你用网络测试它的时候，你会得到函数找不到错误，用iOS模拟器测试它，然后它就会工作。

赞(0）回复(0）举报 2023-01-17