React Native Expo打印预览无法显示QR Code问题求助

问题原因 #

你直接把QRCode组件实例或未处理的对象插入HTML模板，JavaScript会自动将其转为[object Object]，必须先提取出SVG的原始字符串再嵌入HTML。

具体解决步骤 #

1. 通过Ref获取SVG字符串
   react-native-qrcode-svg组件提供了toSVGString()方法，通过ref引用组件后，调用该方法可以获取完整的SVG XML字符串。

2. 正确嵌入HTML模板
   拿到SVG字符串后，有两种嵌入方式：

   • 直接将SVG字符串作为<svg>标签内容插入HTML
   • 将SVG字符串转成Data URL，放到<img>标签的src属性中

代码示例 #

import React, { useRef, useState } from 'react';
import { View, Button } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import * as Print from 'expo-print';

export default function PrintQRCode() {
  const qrRef = useRef(null);
  const [svgString, setSvgString] = useState('');

  // 获取二维码的SVG字符串
  const getQRCodeSvg = async () => {
    if (qrRef.current) {
      const svg = await qrRef.current.toSVGString();
      setSvgString(svg);
    }
  };

  // 生成HTML并打印
  const printQRCode = async () => {
    const htmlContent = `
      <html>
        <body style="text-align:center;">
          <h1>打印二维码</h1>
          <!-- 方式1：直接嵌入SVG -->
          ${svgString}
          <!-- 方式2：转成Data URL用img标签（适合需要调整尺寸的场景） -->
          <!-- <img src="data:image/svg+xml;utf8,${encodeURIComponent(svgString)}" style="width:200px;height:200px;" /> -->
        </body>
      </html>
    `;
    await Print.printAsync({ html: htmlContent });
  };

  return (
    <View style={{ padding: 20 }}>
      <QRCode ref={qrRef} value="https://your-target-url.com" size={200} />
      <Button 
        title="打印二维码" 
        onPress={() => getQRCodeSvg().then(printQRCode)} 
        style={{ marginTop: 20 }} 
      />
    </View>
  );
}

注意事项 #

• toSVGString()是异步方法，必须等待它返回结果后再生成HTML模板，否则会拿到空字符串或未完成的内容。
• 使用Data URL方式时，一定要用encodeURIComponent()转义SVG字符串中的特殊字符（比如引号、尖括号），避免HTML解析报错。
• 可以先在控制台打印svgString确认内容是否正确，确保是完整的SVG标签结构。

内容的提问来源于stack exchange，提问作者ofir