React-Native之截圖組件view-shot的介紹與使用

一,需求分析

    1,需要將分享頁生成圖片，並分享到微信好友與朋友圈。

二,react-native-view-shot介紹

    1,可以截取當前屏幕或者按照當前頁面的組件來選擇截取，如當前頁面有一個圖片組件，一個View組件，可以選擇截取圖片組件或者View組件。支持iOS和安卓。

    2,如需要截取ScrollView，只需要將”full”傳遞給snapshot方法即可。 captureRef方法和captureScreen方法都可以設置options，options的說明如下：

• width / height：可以指定最后生成圖片的寬度和高度。
• format：指定生成圖片的格式png or jpg or webm (Android). 默認是png。
• quality：圖片的質量0.0 - 1.0 (default)。
• result：最后生成的類型，可以是tmpfile、base64、data-uri。
• snapshotContentContainer：如果設置為True的話，會動態計算組件的高度。如果是ScrollView組件，就會截取整個ScrollView的實際高度。

3,一些方法

• children:點陣化的實際內容。
• options:與captureRef方法中的選項相同。
• captureMode(string):
• 如果沒有定義(默認)。捕獲不是自動的，您需要自己使用ref和調用capture()。
• "mount"：在掛載時捕獲視圖一次。(理解圖像加載不會等待是很重要的，在這種情況下，您希望在圖像#onLoad之后的viewShotRef.capture()中使用“none”)。
• "continuous"：這將捕獲大量的圖像連續。非常具體的用例。
• "update"：這將捕獲圖像每次反應重繪(上做更新)。非常具體的用例。
• onCapture:在定義captureMode函數時，將使用捕獲結果調用這個回調函數。
• onCaptureFailure:當定義了captureMode函數時，當捕獲失敗時將調用這個回調函數。

組件地址：react-native-view-shot

三,react-native-view-shot使用

    3.1 安裝方法

    npm install react-native-view-shot

   自動配置：react-native link react-native-view-shot

   手動配置：       
    1,android配置

  （1),在android/settings.gradle文件中添加如下代碼:

include ':react-native-view-shot'
project(':react-native-view-shot').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-shot/android')

    (2),在android/app/build.gradle文件中的dependencies標簽中添加模塊依賴:

 ...
   
 dependencies {
  
    ...
  
       implementation project(':react-native-view-shot')    // Add this line only.
  
 }

    (3),在MainActivity.java文件中添加如下代碼:    

import fr.greweb.reactnativeviewshot.RNViewShotPackage;; // Add this line before public class MainActivity
 
    ...
 
 @Override
  protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNViewShotPackage(),       // Add this line
     );
 }

     2,ios配置

            (1),在Xcode中Libraries目錄下添加RNViewShot.xcodeproj(項目文件名/node_modules/react-native-view-shot/ios/)

            (2),將Libraries中RNViewShot.xcodeproj下的products目錄下的libRNViewShot.a文件拖到General--Linked FrameworksLibraries下

            (3),在Xcode中項目目錄下Build Settings--Header Search Paths 添加：$(SRCROOT)/../node_modules/react-native-view-shot/ios

    3.2 使用實例

   引入

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

     1，captureScreen() 截屏方法：截取當前屏幕，跟系統自帶的截圖一致，只會截取當前屏幕顯示的頁面內容。如果是ScrollView，那么未顯示的部分是不會被截取的。

 captureScreen({
                format: "jpg",
                quality: 0.8
            }).then(
                uri => {
                    let Imageuri = (uri.toLowerCase()).includes('file://')?uri:'file://'+uri//判斷是否有file://，沒有則添加
                    self.setState({ Imageuri: Imageuri })
                },
                error => console.log("Oops, snapshot failed==" + error)
        );

     2,captureRef(view, options) 根據組件reference名稱來截取,如需要截取ScrollView，只需要將”full”傳遞給snapshot方法即可。

render() {
     return (
     <ScrollView ref="full">
          <View ref="form1”>
           </View>
                  <View ref="form2”>
           </View>
    </ScrollView>
);
}

snapshot = refname => () =>
captureRef(refname, {
  format: "jpg",
  quality: 0.8,
  result: "tmpfile",
  snapshotContentContainer: true
})
.then(
  uri => console.log("Image saved to", uri),
  error => console.error("Oops, snapshot failed", error)
);