介绍 npm install react-native-view-shot
react-native link react-native-view-shot import {, captureScreen },得到“react-native-view-shot";
captureScreen ({
,格式:“jpg",
,质量:0.8
})
不要犹豫(
,uri =祝辞console.log (“Image saved to",, uri),
,error =祝辞console.error(“哦,,snapshot failed",,错误)
); import {, captureRef },得到“react-native-view-shot";
呈现(),{
,,return (
,& lt; ScrollView ref=癴ull"比;
& lt;才能View ref=癴orm1”比;
,,& lt;/View>
,,,,,,,,& lt; View ref=癴orm2”比;
,,& lt;/View>
,& lt;/ScrollView>
);
}
snapshot =, refname =祝辞,(),=比;
captureRef (refname, {
,格式:“jpg",
,质量:0.8,
结果:大敌;“tmpfile",
,snapshotContentContainer:真的
})
不要犹豫(
,uri =祝辞console.log (“Image saved to",, uri),
,error =祝辞console.error(“哦,,snapshot failed",,错误)
);
如何在反应中使用本机截屏组件?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
反应本地截屏组件:react-native-view-shot,可以截取当前屏幕或者按照当前页面的组件来选择截取,如当前页面有一个图片组件,一个视图组件,可以选择截取图片组件或者视图组件。支持iOS和安卓。
<强>安装方法
<强>使用示例
<强> captureScreen()截屏方法
截取当前屏幕,跟系统自带的截图一致,只会截取当前屏幕显示的页面内容。如果是滚动视图,那么未显示的部分是不会被截取的。
captureRef(视图选项)根据组件参考名称来截取
指定需要截取的组件的ref名称,然后将该裁判名称传递给快照方法来截取指定组件的内容。如需要截取滚动视图,只需要将“全面”传递给快照方法即可。captureRef方法和captureScreen方法都可以设置选项,选项的说明如下:宽度/高度:可以指定最后生成图片的宽度和高度。格式:指定生成图片的格式png或jpg webm (Android)。默认是png.质量:图片的质量0.0 - 1.0(默认)。结果:最后生成的类型,可以是临时文件,base64, data-uri. snapshotContentContainer:如果设置为真正的话,会动态计算组件的高度。如果是滚动视图组件,就会截取整个滚动视图的实际高度。
关于如何在反应中使用本机截屏组件问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。
