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

在react-native中展现二维码是一个很是麻烦的过程。

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

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

npm地址

实现自定义二维码

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

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

若是将WebView看作一个相似View的组件，那么在WebView加载完成以后它就已经在展示上与普通组件没有什么区别了。在这个时候就能够看作已经完成了二维码的生成。

<WebView
    automaticallyAdjustContentInsets={false}
    scalesPageToFit={Platform.OS === 'android'}
    contentInset={{ top: 0, right: 0, bottom: 0, left: 0 }}
    source={{ html: this.html() }}
    opaque={false}
    underlayColor={'transparent'}
    style={{ height: size, width: size }}
    javaScriptEnabled={true}
    scrollEnabled={false}
    onLoad={this.props.onLoad}
    onLoadEnd={this.props.onLoadEnd}
    originWhitelist={['*']}
/>
复制代码

其中的html方法其实就是在生成咱们须要的html代码。

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

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

最终效果以下：

产生组件快照

不少时候咱们仍是须要将APP中的某个部分截图保存的。

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

有没有想到什么？

是的，咱们能够在客户端本身生成分享图片。

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

这个时候若是图片可以在客户端中生成岂不是很是的好。速度又快，效果又好。

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

npm地址 源代码地址