React Native (Android) 中的屏幕截图

Posted 2023-03-11

【中文标题】React Native (Android) 中的屏幕截图

【英文标题】：Screen Shot in React Native (Android)

【发布时间】：2018-06-19 09:23:48

【问题描述】：

我正在使用React-Native-View-Shot Library截取整个屏幕。

文档中提到方法 captureScreen():

captureScreen() 将捕获当前显示屏幕的内容作为本机硬件屏幕截图。它不需要 ref 输入，因为它在视图级别不起作用。这意味着 ScrollView 不会被完整捕获 - 只会捕获用户当前可见的部分。

但是，屏幕截图没有捕获除相机预览之外的任何组件。文档的互操作性表中声称支持所有使用的组件。

代码：

takeScreenshot() 
    captureScreen(
        format: "jpg",
        quality: 0.8
    ).then(
        uri =>  savePath = uri; console.log("Image saved to", uri); CameraRoll.saveToCameraRoll(uri); Toastandroid.show(uri + "", ToastAndroid.SHORT); ,
        error => console.error("Oops, snapshot failed", error)
        );


render() 
    return (
        <View style=styles.container>
            <Text style=backgroundColor:"white">Hello World</Text>
            <RNCamera style=styles.preview
                ref=ref => 
                    this.camera = ref;
                
                type=RNCamera.Constants.Type.back
                flashMode=RNCamera.Constants.FlashMode.on
                permissionDialogTitle='Permission to use camera'
                permissionDialogMessage='We need your permission to use your camera phone'>
            </RNCamera>
            <Button title="Capture" onPress=()=>this.takeScreenshot()/>
        </View>
    )

RNCamera 是来自react-native-camera 的摄像头组件

Expected Result

Obtained Result

Referred Question也没有答案

可能是什么问题？为什么组件也被相机预览覆盖了？

【参考方案1】：

import ViewShot from "react-native-view-shot";

<ViewShot ref="viewShot" options= format: "jpg", quality: 0.9 
     >
<View style=styles.container ref='snapViewPic'>
     <RNCamera style=styles.preview
            ref=ref => 
                this.camera = ref;
            
            type=RNCamera.Constants.Type.back
            flashMode=RNCamera.Constants.FlashMode.on
            permissionDialogTitle='Permission to use camera'
            permissionDialogMessage='We need your permission to 
             use your camera phone'>
        </RNCamera>
 </View>
</ViewShot>

takeScreenShot () 
    this.refs.viewShot.capture().then(uri => 
     console.log("do something with ", uri);
    );

确保您的“捕获按钮”和“hello world”不得出现在“容器”视图中。

这对我有用。