本篇文章主要介绍了react native 截屏组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React Native 截屏组件：react-native-view-shot，可以截取当前屏幕或者按照当前页面的组件来选择截取，如当前页面有一个图片组件，一个View组件，可以选择截取图片组件或者View组件。支持iOS和安卓。
安装方法
npm install react-native-view-shotreact-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 ( );}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的实际高度。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
如何把vue2.0 和 animate.css合并在一起使用（详细教程）
在C#中如何实现将一个字符转换为整数
在vue2.0中有哪些常用的 UI 库？
在微信小程中如何使用swiper组件实现图片切换显示
以上就是如何使用React Native 截屏组件（详细教程）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2749498.html
