React Native 截屏組件的示例代碼

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

本篇文章主要介紹了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() 截屏方法

截取當前屏幕，跟系統(tǒng)自帶的截圖一致，只會截取當前屏幕顯示的頁面內容。如果是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的話，會動態(tài)計算組件的高度。如果是ScrollView組件，就會截取整個ScrollView的實際高度。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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