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 相关文章推荐
jQuery 使用手册(二)
Sep 23 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
jQuery之动画效果大全
Nov 09 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
ant design charts 获取后端接口数据展示
May 25 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
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
php实现购物车功能(上)
2020/07/23 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
python的re模块应用实例
2014/09/26 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
创建Django项目图文实例详解
2019/06/06 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
python实现加密的方式总结
2020/01/19 Python
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
大学生最新职业生涯规划书范文
2014/01/12 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
本科应届生求职信
2014/08/05 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
市场督导岗位职责
2015/04/10 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python