React Native 截屏組件的示例代碼

更新時(shí)間：2017年12月06日 17:08:51 作者：ReactNative開(kāi)發(fā)圈

本篇文章主要介紹了React Native 截屏組件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

React useCallback使用教程
useCallback是react中比較重要的一個(gè)hook，useCallback 用來(lái)返回一個(gè)函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用
2023-01-01
詳解React?ISR如何實(shí)現(xiàn)Demo
這篇文章主要為大家介紹了React?ISR如何實(shí)現(xiàn)Demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
Ant?Design?組件庫(kù)按鈕實(shí)現(xiàn)示例詳解
這篇文章主要介紹了Ant?Design?組件庫(kù)按鈕實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪</P><P><BR>
2022-08-08
React拆分窗格組件的兩種方法
這篇文章主要介紹了React拆分窗格組件的兩種方法,使用第三方庫(kù)react-split-pane適用于快速實(shí)現(xiàn)拆分窗格功能，并且對(duì)功能和樣式的要求較為簡(jiǎn)單的場(chǎng)景，本文結(jié)合示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2023-07-07
React-router4路由監(jiān)聽(tīng)的實(shí)現(xiàn)
這篇文章主要介紹了React-router4路由監(jiān)聽(tīng)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
React將組件作為參數(shù)進(jìn)行傳遞的3種方法實(shí)例
其實(shí)react組件之間傳遞參數(shù)是比較簡(jiǎn)單的,組件傳入?yún)?shù)的一種方式,下面這篇文章主要給大家介紹了關(guān)于React將組件作為參數(shù)進(jìn)行傳遞的3種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
React-hooks面試考察知識(shí)點(diǎn)匯總小結(jié)(推薦)
這篇文章主要介紹了React-hooks面試考察知識(shí)點(diǎn)匯總,Hook?使你在無(wú)需修改組件結(jié)構(gòu)的情況下復(fù)用狀態(tài)邏輯，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-10-10
詳解React中的不可變值
這篇文章主要介紹了React中的不可變值的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用react.js，感興趣的朋友可以了解下
2021-04-04
React和Vue組件更新的實(shí)現(xiàn)及區(qū)別
React 和 Vue 都是當(dāng)今最流行的前端框架,它們都實(shí)現(xiàn)了組件化開(kāi)發(fā)模式,本文將從React和Vue的組件更新原理入手,剖析兩者虛擬DOM difer算法的異同點(diǎn),具有一定的參考價(jià)值,感興趣的可以了解一下
2024-02-02
React immer與Redux Toolkit使用教程詳解
這篇文章主要介紹了React中immer與Redux Toolkit的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2022-10-10