当前位置： 移动技术网 > IT编程>开发语言>JavaScript > React Native 截屏组件的示例代码

React Native 截屏组件的示例代码

2018年05月18日  | 移动技术网IT编程  | 我要评论

天妖皇,过滤机械,中翌全球购

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的实际高度。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网