本篇文章主要介紹了React Native 截圖組件的範例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
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的實際高度。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
如何把vue2.0 和animate.css合併在一起使用（詳細教學）
#以上是如何使用React Native 截圖元件（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
