共计 1194 个字符，预计需要花费 3 分钟才能阅读完成。
在 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 地址源代码地址