react-native 生成二维码并截图保存的功能实现

  • Z时代
  • 2024-01-10
  • 分类：综合

react

近期项目开发需要，需要更加不同用户生成随机的二维码，并实现保存该二维码（包含二维码周边的背景图，类似支付宝的红包二维码图片）的功能。在网上查找相关组件，开始使用的是react-native-qrcode组件，截图功能使用的是react-native-view-shot组件，保存图片则是使用的react-native自带的CameraRoll模块。以为这样就可以万事大吉了，没想到还是出了不明所以的bug（让人脑大抓狂的react-native。。。）。

出现的问题是，在输入地址生成二维码并截图后，发现保存在手机相册中的图片只有二维码和下边的文字，而背景颜色或者图片没有被截取出来，直接默认显示了白色，但是二维码和文字的父级View的可视区域是被截取下来的。示例如下：

失败的二维码截图

对于出现的这个问题，很是摸不着头脑，开始怀疑是截图组件出问题了，但是吧QRCode标签注释掉之后，重新截图保存，就可以得到想要的可视区域截图，示例如下：

无QRCode标签的截图

所以，截图组件是没有问题的，问题应该是出在了生成二维码的组件上。由于自己能力有限，时间又比较紧，所以没有去从组件源码上下手处理这个问题，而是在网上搜找其他可以生成二维码的组件进行尝试。查找了许久，可能是搜索关键字的问题，大部分文章都是关于react-native-qrcode的。后来在一篇文章中找到了其他的组件，该文章的链接： React Native二维码的生成和扫描。 

这篇文章总结推荐使用的是react-native-qrcode-svg，一个依赖于react-native-svg的组件，因此在使用过程中，需要先引入react-native-svg，然后link，再引入react-native-qrcode-svg。

npm install react-native-svg --save  // 或者使用 yarn add react-native-svg
react-native link react-native-svg  // 不要忽略这一步，不然会报错
npm install react-native-qrcode-svg --save // 或者使用 yarn add react-native-qrcode-svg

这个组件安装成功之后，按照文档说明的要求，就可以使用了。这个组件还支持logo的设置，更多配置请查看该组件的文档，这里就不再赘述了。

    <QRCode
      value="Just some string value" // 生成二维码的value
      size={150}  // 二维码大小
      color="#333"  // 二维码主色
      backgroundColor="white"   // 二维码背景色
      logo={{uri: base64Logo}   // 二维码中间加载显示的logo
      logoSize={30}             // 二维码logo大小
      logoBackgroundColor='transparent'  // 二维码logo背景色
      ...
    />

修改完生成二维码的组件之后，再按照原有逻辑步骤生成、截图、保存图片，发现之前遇到的背景色为白色的问题得到了解决。示例如下：

成功的二维码截图

不足： 在使用react-native自带的CameraRoll模块进行保存图片时，无法选择保存路径，并且成功返回后的uri是Android原生的“content://media/external/images/media/XXX”这样格式的路径，怎么在转换成路径还没有找到相关的方法。

提示： 该功能实践只在Android端进行了调试，IOS不知道能否成功，请需要的读者，自行进行尝试。希望一切顺利！

以上是 react-native 生成二维码并截图保存的功能实现 的全部内容， 来源链接： utcz.com/z/383125.html

回到顶部