react-native - React Native (Android) 中的屏幕截图

Question

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

文档中提到该方法 captureScreen():

captureScreen() will capture the contents of the currently displayed screen as a native hardware screenshot. It does not require a ref input, as it does not work at the view level. This means that ScrollViews will not be captured in their entirety - only the portions currently visible to the user.

但是，屏幕截图并未捕获相机预览以外的任何组件。如文档的互操作性表所示，声称支持所有使用的组件。

代码:

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”不能出现在“容器”中。

这对我有用。