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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
jQuery插件开发汇总
May 15 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
js编写的treeview使用方法
Nov 11 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
php生成短网址示例
2014/05/05 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
php strftime函数的详细用法
2018/06/21 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
Prototype Function对象 学习
2009/07/12 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
Weblogic的布署方式
2013/08/23 面试题
工程质量月活动方案
2014/02/19 职场文书
中国梦口号
2014/06/13 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
四风问题查摆材料
2014/08/25 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
出售房屋协议书范本
2014/10/06 职场文书
2014年业务工作总结
2014/11/17 职场文书
硕士学位申请报告
2015/05/15 职场文书