Soy nuevo en reaccionar/reaccionar nativo. Estoy tratando de compartir un código QR como imagen. Generar QR funciona , pero quiero compartirlo como imagen (whatsapp, bluetooth, etc).
import QRCode from 'react-native-qrcode-svg'; let svg = useRef(); //let svg = ''; <QRCode size={300} value={`${name}`} getRef={(c) => (svg = c)} />Intenté " obtener la codificación de cadena base64 del qrcode " de la documentación oficial, pero simplemente no lo entiendo
//From Off Doc getDataURL() { this.svg.toDataURL(this.callback); } callback(dataURL) { console.log(dataURL); }Lo que traté de hacer (todo mi código):
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" /> </> );obtener error svg.toDataURL no es una función . He estado en esto durante días, también leí otras consultas acumuladas con el mismo problema, pero las soluciones en esas preguntas no me funcionaron. Gracias de antemano chicos
Cambié un par de cosas en su código y lo usé en una aplicación de exposición donde instalé react-native-qrcode-svg y 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", }, });Los cambios principales de su código son definir la devolución de llamada como una función
// you had callback(dataURL) { console.log(dataURL); } // but it should be function callback(dataURL) { console.log(dataURL); } // or const callback = (dataURL) => { console.log(dataURL) } y haciendo la llamada correctamente en getDataURL
// you had svg.toDataURL(callback(dataURL)); // but it should be svg.toDataURL(callback);Después de esos cambios, hacer clic en el botón devuelve la dataURL en la consola como se esperaba.
Respuesta anterior antes de editar la pregunta:
Su problema parece ser que svg no está definido cuando llama a svg.toDataURL , ¿cómo llama a la función? Si está haciendo eso en el primer render, es posible que la referencia aún no esté lista.
Si está haciendo eso usando una devolución de llamada en un botón en la pantalla, entonces el problema debería estar relacionado con el código que configura la referencia.
¿Puedes publicar todo tu componente?