近期專案開發需要，需要更加不同使用者生成隨機的二維碼，並實現儲存該二維碼（包含二維碼周邊的背景圖，類似支付寶的紅包二維碼圖片）的功能。在網上查詢相關元件，開始使用的是react-native-qrcode元件，截圖功能使用的是react-native-view-shot元件，儲存圖片則是使用的react-native自帶的CameraRoll模組。以為這樣就可以萬事大吉了，沒想到還是出了不明所以的bug（讓人腦大抓狂的react-native。。。）。

出現的問題是，在輸入地址生成二維碼並截圖後，發現儲存在手機相簿中的圖片只有二維碼和下邊的文字，而背景顏色或者圖片沒有被截取出來，直接預設顯示了白色，但是二維碼和文字的父級View的可視區域是被擷取下來的。示例如下：

對於出現的這個問題，很是摸不著頭腦，開始懷疑是截圖元件出問題了，但是吧QRCode標籤註釋掉之後，重新截圖儲存，就可以得到想要的可視區域截圖，示例如下：

所以，截圖元件是沒有問題的，問題應該是出在了生成二維碼的元件上。由於自己能力有限，時間又比較緊，所以沒有去從元件原始碼上下手處理這個問題，而是在網上搜找其他可以生成二維碼的元件進行嘗試。查找了許久，可能是搜尋關鍵字的問題，大部分文章都是關於react-native-qrcode的。後來在一篇文章中找到了其他的元件，該文章的連結： 

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背景色
      ...
    />

修改完生成二維碼的元件之後，再按照原有邏輯步驟生成、截圖、儲存圖片，發現之前遇到的背景色為白色的問題得到了解決。示例如下：

不足： 在使用react-native自帶的CameraRoll模組進行儲存圖片時，無法選擇儲存路徑，並且成功返回後的uri是Android原生的“content://media/external/images/media/XXX”這樣格式的路徑，怎麼在轉換成路徑還沒有找到相關的方法。

提示： 該功能實踐只在Android端進行了除錯，IOS不知道能否成功，請需要的讀者，自行進行嘗試。希望一切順利！