如何使用react-native-qrcode保存生成的QR码

Question

我正在尝试使用此模块生成QR码'react-native-qrcode'，在这里我生成了这样的QR码，如何保存此QR码。

任何人都可以给我建议如何保存这个生成的qr，任何帮助非常感谢

Answer 1

您使用的库uses a webview，因此您没有可以保存的图像。要以概念方式保存QR代码，您可以存储提供的值并将其放入组件中，以便显示它。如果需要获取图像，则需要将webview javascript part扩展为使用画布的the ImageData interface。这是恕我直言，相当棘手，我不完全确定是否有可能从网络视图中恢复数据。

Answer 2

使用rn-qr-generator生成QR码。它将返回生成的Image的路径或base64。稍后，您可以使用CameraRoll模块将图像存储在CameraRoll（或Android上的Gallery）中。

import RNQRGenerator from 'rn-qr-generator';
import CameraRoll from "@react-native-community/cameraroll";
 
RNQRGenerator.generate({
  value: 'your_qr_string_value_here',
  height: 100,              // height of the output image
  width: 100,               // width of the output image
  base64: false,            // default 'false'
  backgroundColor: 'black', // default 'white'
  color: 'white',           // default 'black'
})
  .then(response => {
    const { uri, width, height, base64 } = response;
    this.setState({ imageUri: uri });
    CameraRoll.save(uri);
    
  })
  .catch(error => console.log('Cannot create QR code', error));

在致电CameraRoll.save之前，请确保您具有保存图像的权限。权限示例请参见here。