react native截屏組件 react-native-view-shot總結

截屏組件react-native-view-shot，可以截取當前屏幕或者按照當前頁面的組件來選擇截取
兼容情況：

1、安裝

yarn add react-native-view-shot

React Native 0.60.x之前的版本需要手動link，

react-native link react-native-view-shot

0.60.x之後會自動link，不過ios可能需要做些手動操作

cd ios && pod install && cd ..

2、使用高級API

現在官方推薦使用的高級API：
直接將組件導入當作標籤使用：

import ViewShot from "react-native-view-shot";  // 這裏的ViewShot就是要使用的標籤的名字

下面的<ViewShot></ViewShot>所包裹的就是需要截圖的區域，裏面所有的元素都會被截下來

<ViewShot ref="viewShot" options={{ format: "jpg", quality:1 }}>
  <Text>...這裏是截圖區域，可以是任意顯示元素...</Text> 
</ViewShot>

對應的取值方法
指定需要截取的組件的ref名稱，然後調用capture()來截取指定組件的內容。如下，需要使用viewShot.capture()來進行截取：

this.refs.viewShot.capture().then(uri => {
  console.log("截圖完成以後的操作 ", uri); // 這裏的uri即爲截取完成的圖片，可以是本地文件、base64等等
});

補充options

標籤上面使用到的options屬性參數：

• format：指定生成圖片的格式png 、 jpg 、 webm (Android)， 默認格式爲png
• quality：截取的圖片質量，取值0.0 - 1.0 ，默認爲1.0
• result：最後生成的圖片類型：tmpfile、base64、data-uri，
  1、tmpfile：臨時文件（該文件僅在應用程序運行時才存在）。
  2、base64：編碼爲base64並返回原始字符串。僅適用於小圖像。
  3、data-uri：與base64相同，還包含數據URI方案頭。
• width ：指定最後生成的圖片的寬度
• height：指定最後生成的圖片的高度

需要截取的區域有動態加載的圖片時

需要在圖片加載完以後再去進行截取：

class waitingCaptureDemo extends Component {
  onImageLoad = () => {
    this.refs.viewShot.capture().then(uri => {
      console.log("圖片加載完成以後進行的截取 ", uri);
    })
  };
  render() {
    return (
      <ViewShot ref="viewShot">
        <Text>...截取區域..</Text>
        <Image ... onLoad={this.onImageLoad} />
      </ViewShot>
    );
  }
}

截取區域爲ScrollView時

class captureScrollViewContentDemo extends Component {
  onCapture = uri => {
    console.log("ScrollView的完整內容截圖 ", uri);
  }
  render() {
    return (
      <ScrollView>
        <ViewShot onCapture={this.onCapture} captureMode="mount">
          <Text>.這裏是ScrollView的內容部分	</Text>
        </ViewShot>
      </ScrollView>
    );
  }
}

補充captureMode、onCapture、onCaptureFailure

captureMode
如果沒有定義捕獲模式，默認不是自動捕獲的，需要使用ref並且調用capture()；
取值：

• mount：掛載後立即捕獲視圖
• continuous：連續捕獲很多圖像
• update：每次React重繪（更新時）時捕獲圖像

onCapture：當定義了captureMode時，使用這個回調獲取捕獲結果；
onCaptureFailure：當定義了captureMode時，如果捕獲失敗，則將調用此回調。

3、使用captureRef 低級API

import { captureRef } from "react-native-view-shot";

captureRef(viewRef, {
  format: "png",
  quality: 1
}).then(
  uri => console.log("這是需要保存的圖片", uri),
  error => console.error("截取圖片失敗", error)
);

未完待續~~~~~~~~