React Native 截屏組件的示例代碼

React Native 截屏組件：react-native-view-shot，可以截取當(dāng)前屏幕或者按照當(dāng)前頁面的組件來選擇截取，如當(dāng)前頁面有一個(gè)圖片組件，一個(gè)View組件，可以選擇截取圖片組件或者View組件。支持iOS和安卓。

安裝方法

npm install react-native-view-shot
react-native link react-native-view-shot

使用示例

captureScreen() 截屏方法

截取當(dāng)前屏幕，跟系統(tǒng)自帶的截圖一致，只會截取當(dāng)前屏幕顯示的頁面內(nèi)容。如果是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) 根據(jù)組件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方法來截取指定組件的內(nèi)容。如需要截取ScrollView，只需要將”full”傳遞給snapshot方法即可。 captureRef方法和captureScreen方法都可以設(shè)置options，options的說明如下： width / height：可以指定最后生成圖片的寬度和高度。 format：指定生成圖片的格式png or jpg or webm (Android). 默認(rèn)是png。 quality：圖片的質(zhì)量0.0 - 1.0 (default)。 result：最后生成的類型，可以是tmpfile、base64、data-uri。 snapshotContentContainer：如果設(shè)置為True的話，會動態(tài)計(jì)算組件的高度。如果是ScrollView組件，就會截取整個(gè)ScrollView的實(shí)際高度。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com