React Native (Android) 中的屏幕截图

Question

我正在使用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也没有答案

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

Answer 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”不得出现在“容器”视图中。

这对我有用。