分享二維碼 React Native

Question

我是 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 不是 function 。 我已經在這幾天了，我還閱讀了另一個具有相同問題的 stackover 查詢，但這些問題的解決方案對我不起作用。 提前謝謝你們

DataURL 錯誤

控制台日志（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);

在這些更改之后，單擊按鈕會按預期在控制台中返回 dataURL。

---

問題編輯前的舊答案：

您的問題似乎是調用svg.toDataURL時未定義 svg 您如何調用該函數？ 如果您在第一次渲染時這樣做，則 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 測試它時，你得到 function not found 錯誤，用 iOS 模擬器測試它然后它就會工作。