react-native - 打印 react native 文本和生成的 QR

Question

您好，我需要生成 PDF 或 HTML View 以从 Android 设备打印文档。所以我开始使用 Print from 'expo-print'。我可以做到这一点

Print.printAsync({
  html: "<h3>Hello World</h3>"
});

并且工作正常。但我想在该 HTML 中生成并包含一个 QR 码，我想使用 react-native-qrcode 但我不知道如何将其包含在其中。

说明:二维码也需要无连接生成

谢谢

Answer 1

我刚遇到同样的问题，这是我的解决方案。

我使用 react-native-qrcode-svg因为它有一个 getRef Prop ，供您进一步处理 QR 数据。下面，您可以找到我的粗略实现(我的主要代码在另一台计算机上)。您可以进一步自定义它以隐藏 QRCode 组件或使用 Redux 来存储 QRData 但它应该可以正常工作。

import QRCode from 'react-native-qrcode-svg';

...

constructor(props) {
    super(props)
    this.state = { qrData: "" }
}

componentDidMount () {
  this.getDataURL(); // => Calling this in here to make sure the QRCode component did mount
}

... more code ...
print = () => {
  Print.printAsync({
    html: `
       <h3>Hello World</h3>
       <img src="data:image/jpeg;base64,${this.state.qrData}"/>
     `
  });
}
...

getDataURL() {
  this.svg.toDataURL(this.callback);
}
callback(dataURL) {
  this.setState({qrData: dataURL});
}
render() {
  return (
    <QRCode
      value="Just some string value"
      getRef={(c) => (this.svg = c)}
    />
    <Button title="Print QR to HTML" onPress={this.print} />
  );
}