React Native 截屏组件的示例代码


Posted in Javascript onDecember 06, 2017

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的实际高度。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中暂停功能的实现代码
Mar 04 Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
JQuery中的ready函数冲突的解决方法
May 17 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 #jQuery
mui back 返回刷新页面的实例
Dec 06 #Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 #Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 #jQuery
JS实现登录页密码的显示和隐藏功能
Dec 06 #Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 #Javascript
基于Vue制作组织架构树组件
Dec 06 #Javascript
You might like
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
python动态监控日志内容的示例
2014/02/16 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python温度转换实例分析
2018/01/17 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
Python中有几个关键字
2020/06/04 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
医院护士见习期自我鉴定
2014/04/10 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
应届生简历自我评价
2015/03/11 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
贷款工作证明模板
2015/06/12 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript