react native截取頁面保存爲圖片到手機相冊

最近要做下載海報和分享的功能，於是有了這篇博客~~
首先來看一下要實現的效果~

首先捋一下實現步驟：

遮罩層紅色框內的爲要保存到相冊的圖片區域，點擊下載海報的時候就將圖片區域進行截圖並且保存到本地。

下面來做具體實現：

具體安裝步驟就不再贅述了，網上有各種教程

1. 引入截屏組件react-native-view-shot

	import ViewShot from "react-native-view-shot";
	
	<ViewShot ref="viewShot" options={{ format: "jpg", quality: 1, width: 375, height: 570 }} style={styles.imageArea}>   // 截圖區域
	</ViewShot>

	

然後在需要截圖的時候使用以下代碼進行截取：

this.refs.viewShot.capture().then(uri => {    // 這裏的refs後面的viewShot爲上面標籤中自定義的，可以更改
      this.setState({
        shareImg: uri,    // 這個uri即爲截下來的圖片，可以在上面標籤中format指定類型
      })
    });

2. 保存內存中的圖片到本地
首先引入CameraRoll

import CameraRoll from "@react-native-community/cameraroll";

然後在需要保存時進行以下操作：

  // 下載海報
  _savaImg = () => {
    let promise = CameraRoll.saveToCameraRoll(this.state.shareImg);
    promise.then(function (result) {
      alert('保存成功！地址如下：\n' + result);
    }).catch(function (error) {
      alert('保存失敗！\n' + error);
    });
  }

4. End