react-native中生成二维码和分享图片

一时失言乱红尘 2022-04-11 12:13 500阅读 0赞

在react-native中展示二维码是一个非常麻烦的过程。

最好的方法莫过于原生支持画二维码。但是这有一个副作用，需要在原生中添加新的代码。对于不打算很快升级的项目是一个很通过的选择。

这里我介绍一种不使用原生的方式来生成二维码，副作用仅仅是需要联网下载一个js文件。当然可以使用本地缓存了，这样就和原生几乎一致了。

[npm地址][npm]

## 实现自定义二维码 ##

不添加原生代码的情况下实现react-native中展示二维码，其实利用的正是WebView组件。

在前端开发的过程中已经有大神实现了js生成二维码的功能。它就是qrcode.js，熟悉的人已经可以很快想到实现方式了。

如果将WebView看做一个类似View的组件，那么在WebView加载完成之后它就已经在展现上与普通组件没有什么区别了。在这个时候就可以看做已经完成了二维码的生成。

其中的`html`方法其实就是在生成我们需要的html代码。

我们再这里定义几个参数，方便我们使用

static defaultProps = { 
        value: "",
        size: 100,
        bgColor: "#fff",
        fgColor: "#000",
        onLoad: () => {  },
        onLoadEnd: () => {  },
        }

最终效果如下：  
![5c089cf61b37c.png][]

## 产生组件快照 ##

很多时候我们还是需要将APP中的某个部分截图保存的。

在react-native中，我们可以利用`takeSnapshot`方法，将组件保存在临时目录中，同时使用`CameraRoll.saveToCameraRoll`方法将图片放入相册中。

有没有想到什么？

是的，我们可以在客户端自己生成分享图片。

如果你的分享图片用到了很多动态数据。比如：用户不同图片不同，产品或者渠道不同图片也不同。这个时候服务端生成图片会非常的耗资源。同时用户在等待图片生成的过程中也会有很大的延迟。

这个时候如果图片能够在客户端中生成岂不是非常的好。速度又快，效果又好。

利用上面的二个组件，我们就可以自定义分享图片并下载到用户的相册中。

[npm地址][npm]  
[源代码地址][Link 1]

[npm]: https://www.npmjs.com/package/react-native-qrcode-snapshot
[5c089cf61b37c.png]: https://i.loli.net/2018/12/06/5c089cf61b37c.png
[Link 1]: https://github.com/cuo9958/react-native-qrcode-snapshot/blob/master/lib/QRCode.js