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地址
源代碼地址