React Native 截屏組件的示例代碼
React Native 截屏組件：react-native-view-shot，可以截取當(dāng)前屏幕或者按照當(dāng)前頁(yè)面的組件來(lái)選擇截取，如當(dāng)前頁(yè)面有一個(gè)圖片組件，一個(gè)View組件，可以選擇截取圖片組件或者View組件。支持iOS和安卓。
安裝方法
npm install react-native-view-shot react-native link react-native-view-shot
使用示例
captureScreen() 截屏方法
截取當(dāng)前屏幕，跟系統(tǒng)自帶的截圖一致，只會(huì)截取當(dāng)前屏幕顯示的頁(yè)面內(nèi)容。如果是ScrollView，那么未顯示的部分是不會(huì)被截取的。
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名稱來(lái)截取
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方法來(lái)截取指定組件的內(nèi)容。如需要截取ScrollView，只需要將”full”傳遞給snapshot方法即可。 captureRef方法和captureScreen方法都可以設(shè)置options，options的說(shuō)明如下： 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的話，會(huì)動(dòng)態(tài)計(jì)算組件的高度。如果是ScrollView組件，就會(huì)截取整個(gè)ScrollView的實(shí)際高度。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- react-native動(dòng)態(tài)切換tab組件的方法
- React Native懸浮按鈕組件的示例代碼
- 詳解如何在項(xiàng)目中使用jest測(cè)試react native組件
- React Native中導(dǎo)航組件react-navigation跨tab路由處理詳解
- React Native 通告消息豎向輪播組件的封裝
- react-native中ListView組件點(diǎn)擊跳轉(zhuǎn)的方法示例
- 詳解React Native開(kāi)源時(shí)間日期選擇器組件(react-native-datetime)
- react-native DatePicker日期選擇組件的實(shí)現(xiàn)代碼
- React-Native之截圖組件react-native-view-shot的介紹與使用小結(jié)
相關(guān)文章
React實(shí)現(xiàn)多標(biāo)簽在有限空間內(nèi)展示
在業(yè)務(wù)中,需要在一個(gè)卡片組件中展示多個(gè)標(biāo)簽,標(biāo)簽組件高度相同,寬度和出現(xiàn)順序不同,要求標(biāo)簽只能在有限的空間內(nèi)展示,所以本文給大家介紹了React實(shí)現(xiàn)多標(biāo)簽在有限空間內(nèi)展示,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了react-dnd?API拖拽工具的詳細(xì)用法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React中使用async validator進(jìn)行表單驗(yàn)證的實(shí)例代碼
react上進(jìn)行表單驗(yàn)證是很繁瑣的，在這里使用async-validator處理起來(lái)就變的很方便了，接下來(lái)通過(guò)本文給大家介紹React中使用async validator進(jìn)行表單驗(yàn)證的方法,需要的朋友可以參考下2018-08-08
react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
React Hook - 自定義Hook的基本使用和案例講解
自定義Hook本質(zhì)上只是一種函數(shù)代碼邏輯的抽取，嚴(yán)格意義上來(lái)說(shuō)，它本身并不算React的特性，這篇文章主要介紹了React類組件和函數(shù)組件對(duì)比-Hooks的介紹及初體驗(yàn),需要的朋友可以參考下2022-11-11
在React項(xiàng)目中引入國(guó)際化可以使用第三方庫(kù)來(lái)實(shí)現(xiàn)，本文主要介紹了react項(xiàng)目中如何引入國(guó)際化，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
本篇文章主要介紹了React復(fù)制到剪貼板的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
React利用lazy+Suspense實(shí)現(xiàn)路由懶加載
這篇文章主要為大家詳細(xì)介紹了React如何利用lazy+Suspense實(shí)現(xiàn)路由懶加載，文中的示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06
React Native 真機(jī)斷點(diǎn)調(diào)試+跨域資源加載出錯(cuò)問(wèn)題的解決方法
下面小編就為大家分享一篇React Native 真機(jī)斷點(diǎn)調(diào)試+跨域資源加載出錯(cuò)問(wèn)題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了React中引入CSS高階用法的方案詳解,至于使用react用哪種方案引入css,并沒(méi)有一個(gè)絕對(duì)的答案,可以根據(jù)各自情況選擇合適的方案,需要的朋友可以參考下2024-02-02