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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
用javascript制作qq注册动态页面
Apr 14 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/06/14 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
jquery CSS选择器笔记
2010/03/29 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
简单的编程0基础下Python入门指引
2015/04/01 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
python 中random模块的常用方法总结
2017/07/08 Python
Django实现表单验证
2018/09/08 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
Python中的全局变量如何理解
2020/06/04 Python
举例讲解Python装饰器
2020/12/24 Python
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
学生保证书范文
2014/04/28 职场文书
团拜会策划方案
2014/06/07 职场文书
孩子教育的心得体会
2014/09/01 职场文书
护士旷工检讨书
2015/08/15 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android