我对原生反应还很陌生。我有一个 React Native 应用程序（expo 托管），我使用react-native-qrcode-svg 库生成 QR 代码作为 SVG。我想将此 QR 码包含在 HTML 模板中并打印它。我使用 expo print 来做到这一点。
我尝试使用占位符 ${} 将其包含在 html 模板中，但是，当我尝试在打印预览中显示二维码时，我只能看到标题，并且二维码显示为 [object Object]。
我已经验证 QRCODE 组件生成了有效的 SVG 字符串。但是，QR 码在打印预览中无法正确显示。
尽管我努力寻找 网上解决了，还是无法在打印预览中显示二维码。任何有关如何解决此问题的指导或建议将不胜感激。谢谢你！ 二维码屏幕组件：
import { View, Text, TouchableOpacity } from "react-native";
import { StyleSheet } from "react-native";
import * as Print from "expo-print";
import QRCODE from "../components/QRCODE";
function QRscreen({ route, navigation }) {
const { currentDate, currentTime, location, qrText } = route.params;
const qrCodeData = JSON.stringify({
Date: currentDate,
Time: currentTime,
Location: location,
UserText: qrText,
});
const qrCodeSvg = QRCODE({ value: qrCodeData });
const handlePrint = async () => {
try {
const html = `
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
</head>
<h1> Qr Code</h1>
<body style="text-align: center;">
${qrCodeSvg}
</body>
</html>
`;
console.log(html);
await Print.printAsync({
html,
});
} catch (error) {
console.error("Printing error:", error);
}
};
return (
<View style={styles.container}>
<View>
<Text style={styles.header}>Qr Code</Text>
<QRCODE value={qrCodeData} />
<TouchableOpacity
style={styles.printButton}
onPress={handlePrint}
activeOpacity={0.6}
>
<Text>Print</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
header: {
alignSelf: "center",
fontSize: 25,
fontWeight: "bold",
marginBottom: 16,
},
printButton: {
alignItems: "center",
backgroundColor: "#DEB887",
padding: 10,
borderRadius: 8,
marginTop: 25,
},
});
export default QRscreen;`
二维码组件：
import QRCode from "react-native-qrcode-svg";
const QRCODE = ({ value, getRef }) => {
return <QRCode value={value} size={200} getRef={getRef} />;
};
导出默认二维码；`
实现此目的的一种方法是利用
imgconst svg = useRef(null);
const [dataUrl, setDataUrl] = useState(null);
const handlePrint = async () => {
const html = `<img src="data:image/jpeg;base64,${dataUrl}"/>`;
await Print.printAsync({
html,
});
};
useEffect(() => {
const getDataURL = () => {
svg.current.toDataURL(setDataUrl);
};
if (svg.current != null) {
getDataURL();
}
}, [svg]);
return (
<View>
<QRCode value="Hello" size={200} getRef={(c) => (svg.current = c)} />
<Button
title="Print"
onPress={handlePrint} />
</View>
);