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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
js浏览器html5表单验证
Oct 17 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
JS中如何优雅的使用async await详解
Oct 05 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工厂模式简单实现方法示例
2018/05/23 PHP
jQuery 入门讲解1
2009/04/15 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
继续学习javascript闭包
2015/12/03 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
从零学Python之引用和类属性的初步理解
2014/05/15 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Django更新models数据库结构步骤
2020/04/01 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
python opencv实现简易画图板
2020/08/27 Python
python用700行代码实现http客户端
2021/01/14 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
试用期转正员工自我评价
2014/09/18 职场文书
返乡农民工证明
2015/06/24 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
详解如何用Python实现感知器算法
2021/06/18 Python
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技