18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

浅谈微信小程序_React Native 截屏组件的示例代码

2021-01-11分享 "> 对不起,没有下一图集了!">
React Native 截屏组件的示例代码       本篇文章主要介绍了React Native 截屏组件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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("Oo凡科抠图, sna凡科抠图hot 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 
sna凡科抠图hot = refname = () = 
captureRef(refname, {
 format: "jpg",
 quality: 0.8,
 result: "tmpfile",
 sna凡科抠图hotContentContainer: true
.then(
 uri = console.log("Image saved to", uri),
 error = console.error("Oo凡科抠图, sna凡科抠图hot failed", error)

指定需要截取的组件的ref名称,然后将该ref名称传递给sna凡科抠图hot方法来截取指定组件的内容。如需要截取ScrollView,只需要将”full”传递给sna凡科抠图hot方法即可。 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。 sna凡科抠图hotContentContainer:如果设置为True的话,会动态计算组件的高度。如果是ScrollView组件,就会截取整个ScrollView的实际高度。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


"> 对不起,没有下一图集了!">
在线咨询