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 相关文章推荐
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 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 中文和编码判断代码
2010/05/16 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
Python实现二维有序数组查找的方法
2016/04/27 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
python-opencv颜色提取分割方法
2018/12/08 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python3正则模块re的使用方法详解
2020/02/11 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
商务日语毕业生自荐信
2013/11/23 职场文书
保密承诺书
2014/03/27 职场文书
学习委员竞选稿
2015/11/20 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL