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、base6四、data-uri。
snapshotContentContainer：若是設置爲True的話，會動態計算組件的高度。若是是ScrollView組件，就會截取整個ScrollView的實際高度。

支持的組件

示例源碼

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

組件地址

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

舉手之勞關注個人微信公衆號：ReactNative開發圈