反应包含叠加组件的本机屏幕截图

时间:2019-02-22 17:05:17

标签: javascript android reactjs react-native expo

我正在尝试制作一个反应本机应用程序,该应用程序使用屏幕快照中包含的叠加层组件获取摄像机预览的屏幕快照。 (一种懒惰/务实的尝试,以使贴纸相机在照片中包含图像)。当我第一次尝试 { captureScreen } from "react-native-view-shot"; 使用静态图像将状态保存为当前屏幕,它可以很好地工作,并保存到用App.js编写的android gallery(CameraRoll)中,如下所示: (返回渲染)     return ( <View style={styles.MainContainer}> <Image source={{uri : this.state.imageURI}} style={{width: 200, height: 300, resizeMode: 'contain', marginTop: 5}} /> <Button title="Press to screenshot" onPress={this.takeScreenShot} /> <Button title="Press to save to CameraRoll" onPress={()=>CameraRoll.saveToCameraRoll(this.state.imageURI)}/> </View>);

但是,当我尝试使用相同的代码但仅以Camera Preview作为背景时,保存到Gallery应用程序(CameraRoll)的文件没有显示叠加组件。总而言之,当在空白视图(包含其顶部的组件)上使用时,通过react-native-view-shot的{​​{1}}方法捕获整个当前查看的屏幕是有效的。但是,一旦与摄影机预览一起用作背景,叠加的组件就不会捕获到已保存的.jpg文件中。相机屏幕截图的代码如下。

{captureScreen}

0 个答案:

没有答案