React Native 截屏组件
时间:2022-06-05
本文章向大家介绍React Native 截屏组件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文原创首发于公众号:ReactNative开发圈,转载需注明出处。
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的实际高度。
支持的组件
示例源码
https://github.com/forrest23/ReactNativeComponents
组件地址
https://github.com/gre/react-native-view-shot
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 最全总结 | 聊聊 Python 数据处理全家桶(Memcached篇)
- Linux内核平台总线设备驱动模型浅析
- Sentinel熔断降级说明
- 浅谈text段、data段和bss段
- RocketMQ消息发送常见错误与解决方案
- 浅谈内核的Makefile、Kconfig和.config文件
- HTTPS 基本原理
- 自动化运维平台Spug测试
- 如何提升前端基建的效能价值?
- iTerm2安装和配置
- 最新最全的mutect2教程
- Flutter基础widgets教程-CupertinoAlertDialog篇
- Spring的Controller是单例还是多例?怎么保证并发的安全
- 用TypeScript装饰器实现一个简单的依赖注入
- PING问题解决方法_20190305