国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React Native 截屏組件

yacheng / 2359人閱讀

摘要：如果是，那么未顯示的部分是不會(huì)被截取的。如果設(shè)置為的話，會(huì)動(dòng)態(tài)計(jì)算組件的高度。如果是組件，就會(huì)截取整個(gè)的實(shí)際高度。

本文原創(chuàng)首發(fā)于公眾號(hào)：ReactNative開發(fā)圈，轉(zhuǎn)載需注明出處。

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 (
     
          
           
    
);
}

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í)際高度。

支持的組件

示例源碼

GitHub - forrest23/ReactNativeComponents: React Native組件大全

組件地址

GitHub - gre/react-native-view-shot: Snapshot a React Native view and save it to an image

舉手之勞關(guān)注我的微信公眾號(hào)：ReactNative開發(fā)圈

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/90206.html

相關(guān)文章

  • 加推Weex實(shí)踐之路（上）

    摘要：我們參考小程序的設(shè)計(jì)思路進(jìn)行了優(yōu)化升級(jí)，為每一個(gè)需要特有化配置的頁(yè)面添加一個(gè)格式的配置文件，配置文件包括導(dǎo)航欄的配置頁(yè)面級(jí)別的配置跳轉(zhuǎn)的配置等，將配置工程化標(biāo)準(zhǔn)化。設(shè)置導(dǎo)航欄按鈕包含按鈕樣式的數(shù)組通過(guò)完成按鈕事件的回調(diào)。一、背景1.為什么是Weex在公司快速發(fā)展的大環(huán)境下，App的更新迭代高速、高頻，技術(shù)團(tuán)隊(duì)平均兩周便可誕生一款中型App，但App團(tuán)隊(duì)只有6個(gè)人（iOS 、Android各3...

    shuibo 評(píng)論0 收藏0

  • 前端清單第 27 期：React Patent License 回復(fù)，Shopify WebVR 購(gòu)

    摘要：新聞熱點(diǎn)國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)就開源許可證風(fēng)波進(jìn)行回復(fù)數(shù)周前，基金會(huì)決定禁止旗下項(xiàng)目使用，因?yàn)槠湓跇?biāo)準(zhǔn)的許可證之外添加了專利聲明此舉引發(fā)了社區(qū)的廣泛討論，希望能夠更新其開源許可證。 showImg(https://segmentfault.com/img/remote/1460000010777089); 前端每周清單第 27 期：React Patent License 回復(fù)，Sho...

    jeffrey_up 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<