React native Expo React本机快照异步返回黑屏
我对React Native很陌生,我正在尝试创建一个应用程序,它将使用Expo的Camera和Takesnapshot Async拍摄照片并保存到Cameraroll 我可能在做一些非常愚蠢的事情,但是现在,即使在我按下快照按钮之前视图显示了相机,我的代码在我单击按钮时保存了一个黑色图像,而不是将相机捕获的图像保存到相机卷中 以下是我的摄像机屏幕代码,我使用“源代码”打开摄像机,“源代码”保存快照:React native Expo React本机快照异步返回黑屏,react-native,camera,expo,React Native,Camera,Expo,我对React Native很陌生,我正在尝试创建一个应用程序,它将使用Expo的Camera和Takesnapshot Async拍摄照片并保存到Cameraroll 我可能在做一些非常愚蠢的事情,但是现在,即使在我按下快照按钮之前视图显示了相机,我的代码在我单击按钮时保存了一个黑色图像,而不是将相机捕获的图像保存到相机卷中 以下是我的摄像机屏幕代码,我使用“源代码”打开摄像机,“源代码”保存快照: class CameraScreen extends React.Component {
class CameraScreen extends React.Component {
state = {
hasCameraPermission: null,
type: Camera.Constants.Type.back,
cameraRollUri: null,
};
async componentWillMount() {
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ hasCameraPermission: status === 'granted' });
}
render() {
const { hasCameraPermission } = this.state;
if (hasCameraPermission === null) {
return <View />;
} else if (hasCameraPermission === false) {
return <Text>No access to camera</Text>;
} else {
return (
<View style={{ flex: 1 }} >
<Camera style={{ flex: 1 }}
type={this.state.type}
collapsable={false}
ref={view => {
this._container = view;
}} >
<View
style={{
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
}} >
{this.state.cameraRollUri &&
<Image
source={{ uri: this.state.cameraRollUri }}
style={{ width: 200, height: 200 }
}
/>}
<TouchableOpacity style={styles.gridItem} onPress={this._saveToCameraRollAsync}>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 0.1,
alignSelf: 'flex-end',
alignItems: 'center',
}}
onPress={() => {
this.setState({
type: this.state.type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back,
});
}}>
<Text
style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
{' '}Flip{' '}
</Text>
</TouchableOpacity>
</View>
</Camera>
</View>
);
}
}
_saveToCameraRollAsync = async () => {
let result = await takeSnapshotAsync(this._container, {
format: 'png',
result: 'file',
});
let saveResult = await CameraRoll.saveToCameraRoll(result, 'photo');
this.setState({ cameraRollUri: saveResult });
};
}
在课堂上有不同的观点,但似乎什么都没有改变
提前感谢您的帮助-我已经为此奋斗了很长时间了:
PS:这是我的第一篇堆栈溢出帖子;如果我的帖子有任何问题,我提前表示歉意。Expo的摄像头组件不支持takeSnapshotAsync 否则,如果您正在使用任何Expo pixi组件,此代码可能会有所帮助:
const { uri } = await this.sketch.takeSnapshotAsync();
//save sketch/signature/doodles in DCIM folder.
let saveResult = await CameraRoll.saveToCameraRoll(uri, 'photo');
Expo Camera不支持快照,相反,您可以使用从相机获取图片同步的方法,该方法返回图像对象
const image = await this._container.takePictureAsync();
const image = await this._container.takePictureAsync();