react-native - 将背景设置为图像以保存到图库

Question

我的 react-native 项目中有一个 qr 代码，react-native-qrcode-svg如下所示：

<QRCode
  value={singleTicketResponse.voucher}
  size={width * 0.5}
  getRef={(c) => (svg = c)}
/>;

我想把这个二维码保存到画廊！我使用此代码将其保存到画廊！

svg.toDataURL((data) => {
  RNFS.writeFile(
    RNFS.CachesDirectoryPath + `/${tracking_code}.png`,
    data,
    "base64"
  )
    .then((success) => {
      return CameraRoll.save(
        RNFS.CachesDirectoryPath + `/${tracking_code}.png`,
        "photo"
      );
    })
    .then(() => {
      onClose();
    })
    .catch((e) => {
      console.log("saveToGallery", e);
    });
});

现在我想将这个白色背景的 QR 保存在图库中！

因为现在，我将 QR 保存到画廊，画廊以黑色背景显示这个并且扫描仪没有检测到 QR 码！！！有什么解决办法吗？？

换句话说，如何组合两张图片（白色背景和二维码）或者如何为这张图片设置背景？

标签： react-nativeqr-codereact-native-svgreact-native-fs

Answer 1

您可以简单地quietZone向组件添加道具QRCode。这个道具是 QR 码周围的边距，当你保存 QR 时它会显示！！

<QRCode
  value={singleTicketResponse.voucher}
  size={width * 0.5}
  quietZone={10} // this props
  getRef={c => (svg = c)}
/>