我正在使用本机相机与所显示的子功能或文档(https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md)。当我尝试第一次尝试使用相机时,它会显示权限视图,该视图可以正常工作。但是每次我想使用相机后第一次使用时,即使状态为“READY”,应用程序也会快速闪烁权限视图。我发现问题是RNCamera带来了摄像头和状态信息,但是在安装组件后状态值会更新。
该值从'PENDIN AUTHORIZATION'跳转到'READY',这就是它闪烁授权视图的原因。是否有任何解决方法,以便我第一次使用相机按预期工作,然后在另一个使用相机不显示授权视图,但相机本身?提前致谢
<RNCamera>
{({ camera, status }) => {
if (status === 'READY'){
return ( <View>.....Camera.... </View>
)
}
else if (status !== 'READY'){
return (<CameraPermission/>)
}
}}
</RNCamera>
您无需处理获得许可的权利,RNCamera将自动处理。像这样定义你的相机:
'use strict';
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from 'react-native-camera';
class BadInstagramCloneApp extends Component {
render() {
return (
<View style={styles.container}>
<RNCamera
ref={ref => {
this.camera = ref;
}}
style={styles.preview}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.on}
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
androidRecordAudioPermissionOptions={{
title: 'Permission to use audio recording',
message: 'We need your permission to use your audio',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
onGoogleVisionBarcodesDetected={({ barcodes }) => {
console.log(barcodes);
}}
/>
<View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
<TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
<Text style={{ fontSize: 14 }}> SNAP </Text>
</TouchableOpacity>
</View>
</View>
);
}
takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options);
console.log(data.uri);
}
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'black',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
padding: 15,
paddingHorizontal: 20,
alignSelf: 'center',
margin: 20,
},
});
AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);