近期项目开发需要,需要更加不同用户生成随机的二维码,并实现保存该二维码(包含二维码周边的背景图,类似支付宝的红包二维码图片)的功能。在网上查找相关组件,开始使用的是react-native-qrcode组件,截图功能使用的是react-native-view-shot组件,保存图片则是使用的react-native自带的CameraRoll模块。以为这样就可以万事大吉了,没想到还是出了不明所以的bug(让人脑大抓狂的react-native。。。)。
出现的问题是,在输入地址生成二维码并截图后,发现保存在手机相册中的图片只有二维码和下边的文字,而背景颜色或者图片没有被截取出来,直接默认显示了白色,但是二维码和文字的父级View的可视区域是被截取下来的。示例如下:
![失败的二维码截图](https://i-blog.csdnimg.cn/blog_migrate/524b82bc063cfc72dcbf810430d78042.png)
对于出现的这个问题,很是摸不着头脑,开始怀疑是截图组件出问题了,但是吧QRCode标签注释掉之后,重新截图保存,就可以得到想要的可视区域截图,示例如下:
![无二维码时的图片](https://i-blog.csdnimg.cn/blog_migrate/7dc1b186a6271cf620c7a4eb89f9aaec.png)
所以,截图组件是没有问题的,问题应该是出在了生成二维码的组件上。由于自己能力有限,时间又比较紧,所以没有去从组件源码上下手处理这个问题,而是在网上搜找其他可以生成二维码的组件进行尝试。查找了许久,可能是搜索关键字的问题,大部分文章都是关于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背景色
...
/>
修改完生成二维码的组件之后,再按照原有逻辑步骤生成、截图、保存图片,发现之前遇到的背景色为白色的问题得到了解决。示例如下:
![成功截图保存的二维码](https://i-blog.csdnimg.cn/blog_migrate/45fd67054d9618cb35223b5b92795731.png)
不足: 在使用react-native自带的CameraRoll模块进行保存图片时,无法选择保存路径,并且成功返回后的uri是Android原生的“content://media/external/images/media/XXX”这样格式的路径,怎么在转换成路径还没有找到相关的方法。
提示: 该功能实践只在Android端进行了调试,IOS不知道能否成功,请需要的读者,自行进行尝试。希望一切顺利!