React Native 截圖元件

ReactNative開發圈發表於2017-12-06
React Native元件

本文原創首發於公眾號：ReactNative開發圈，轉載需註明出處。

React Native 截圖元件：react-native-view-shot，可以擷取當前螢幕或者按照當前頁面的元件來選擇擷取，如當前頁面有一個圖片元件，一個View元件，可以選擇擷取圖片元件或者View元件。支援iOS和安卓。

安裝方法

npm install react-native-view-shot
react-native link react-native-view-shot
複製程式碼

使用示例

captureScreen() 截圖方法

擷取當前螢幕，跟系統自帶的截圖一致，只會擷取當前螢幕顯示的頁面內容。如果是ScrollView，那麼未顯示的部分是不會被擷取的。

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

captureScreen({
  format: "jpg",
  quality: 0.8
})
.then(
  uri => console.log("Image saved to", uri),
  error => console.error("Oops, snapshot failed", error)
);
複製程式碼

captureRef(view, options) 根據元件reference名稱來擷取

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

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)
);
複製程式碼

指定需要擷取的元件的ref名稱，然後將該ref名稱傳遞給snapshot方法來擷取指定元件的內容。如需要擷取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的實際高度。

支援的元件

React Native 截圖元件

示例原始碼

GitHub - forrest23/ReactNativeComponents: React Native元件大全

元件地址

GitHub - gre/react-native-view-shot: Snapshot a React Native view and save it to an image

舉手之勞關注我的微信公眾號：ReactNative開發圈

React Native 截圖元件

相關文章