React Native 截屏组件的示例代码

React Native 截屏组件的示例代码

React Native 截屏组件：react-native-view-shot，可以截取当前屏幕或者按照当前页面的组件来选择截取，如当前页面有一个图片组件，一个View组件，可以选择截取图http://片组件或者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 (

);

}

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。