React Native 截屏组件:react-native-view-shot,可以截取当前屏幕或者按照当前页面的组件来选择截取,如当前页面有一个图片组件,一个View组件,可以选择截取图片组件或者View组件。支持iOS和安卓。
安装方法
npm install react-native-view-shot react-native link react-native-view-shot
使用示例
captureScreen() 截屏方法
截取当前屏幕,跟系统自带的截图一致,只会截取当前屏幕显示的页面内容。如果是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的话,会动态计算组件的高度。如果是ScrollView组件,就会截取整个ScrollView的实际高度。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
React,Native,截屏
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“React Native 截屏组件的示例代码”评论...
更新动态
2024年11月13日
2024年11月13日
- 群星《唱给女人的歌》24K德国HD金碟[WAV+CUE]
- 孙燕姿.2011-是时候【美妙音乐】【WAV+CUE】
- 苏芮.2003-回首·时代全经典2CD【华纳】【WAV+CUE】
- 梁咏琪.1996-爱自己【EEI】【WAV+CUE】
- IGN经典逆天骚操作名著——《墙头草修炼手册》
- 突然爆火的“网红游戏”,真的有那么多人玩吗?
- 何老师客串《浪人崛起》了?盘点与明星撞脸的角色!
- 【原神】关于星鹫赤羽对珐芙琴班配队下珐露珊主C的适配度分析
- 【原神】V5.1攻略 | 迪西雅角色简评
- 【原神】大日御舆顶端怎么上去
- 胥拉齐《感谢有你》DTS-WAV
- 罗海英《金牌歌后》【WAV+CUE】
- 林叶《林叶·夜》【WAV/分轨】
- 群星《国语经典名曲01》音乐磁场系列[WAV+CUE][1G]
- 齐豫《滚石24K》24K金碟珍藏版系列[低速原抓WAV+分轨][1G]