亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

React Native 截屏組件的示例代碼

 更新時間：2017年12月06日 17:08:51   作者：ReactNative開發(fā)圈  
本篇文章主要介紹了React Native 截屏組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

React Native 截屏組件：react-native-view-shot，可以截取當(dāng)前屏幕或者按照當(dāng)前頁面的組件來選擇截取，如當(dāng)前頁面有一個圖片組件，一個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)計算組件的高度。如果是ScrollView組件，就會截取整個ScrollView的實際高度。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • React實現(xiàn)多標(biāo)簽在有限空間內(nèi)展示

    React實現(xiàn)多標(biāo)簽在有限空間內(nèi)展示

    在業(yè)務(wù)中,需要在一個卡片組件中展示多個標(biāo)簽,標(biāo)簽組件高度相同,寬度和出現(xiàn)順序不同,要求標(biāo)簽只能在有限的空間內(nèi)展示,所以本文給大家介紹了React實現(xiàn)多標(biāo)簽在有限空間內(nèi)展示,需要的朋友可以參考下
    2023-12-12
  • react-dnd?API拖拽工具詳細(xì)用法示例

    react-dnd?API拖拽工具詳細(xì)用法示例

    這篇文章主要為大家介紹了react-dnd?API拖拽工具的詳細(xì)用法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-10-10
  • React中使用async validator進(jìn)行表單驗證的實例代碼

    React中使用async validator進(jìn)行表單驗證的實例代碼

    react上進(jìn)行表單驗證是很繁瑣的，在這里使用async-validator處理起來就變的很方便了，接下來通過本文給大家介紹React中使用async validator進(jìn)行表單驗證的方法,需要的朋友可以參考下
    2018-08-08
  • react自適應(yīng)布局px轉(zhuǎn)rem實現(xiàn)示例詳解

    react自適應(yīng)布局px轉(zhuǎn)rem實現(xiàn)示例詳解

    這篇文章主要為大家介紹了react自適應(yīng)布局px轉(zhuǎn)rem實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • React Hook - 自定義Hook的基本使用和案例講解

    React Hook - 自定義Hook的基本使用和案例講解

    自定義Hook本質(zhì)上只是一種函數(shù)代碼邏輯的抽取，嚴(yán)格意義上來說，它本身并不算React的特性，這篇文章主要介紹了React類組件和函數(shù)組件對比-Hooks的介紹及初體驗,需要的朋友可以參考下
    2022-11-11
  • react項目中如何引入國際化

    react項目中如何引入國際化

    在React項目中引入國際化可以使用第三方庫來實現(xiàn)，本文主要介紹了react項目中如何引入國際化，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • React復(fù)制到剪貼板的示例代碼

    React復(fù)制到剪貼板的示例代碼

    本篇文章主要介紹了React復(fù)制到剪貼板的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • React利用lazy+Suspense實現(xiàn)路由懶加載

    React利用lazy+Suspense實現(xiàn)路由懶加載

    這篇文章主要為大家詳細(xì)介紹了React如何利用lazy+Suspense實現(xiàn)路由懶加載，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起了解一下
    2023-06-06
  • React Native 真機(jī)斷點(diǎn)調(diào)試+跨域資源加載出錯問題的解決方法

    React Native 真機(jī)斷點(diǎn)調(diào)試+跨域資源加載出錯問題的解決方法

    下面小編就為大家分享一篇React Native 真機(jī)斷點(diǎn)調(diào)試+跨域資源加載出錯問題的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • React 中引入 CSS 高階用法的方案詳解

    React 中引入 CSS 高階用法的方案詳解

    這篇文章主要介紹了React中引入CSS高階用法的方案詳解,至于使用react用哪種方案引入css,并沒有一個絕對的答案,可以根據(jù)各自情況選擇合適的方案,需要的朋友可以參考下
    2024-02-02

最新評論