File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, Alert } from 'react-native';
import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
const CameraScreen = () => {
const [loading, setLoading] = useState(true);
const { status: permissionStatus, requestPermission } = useCameraPermission();
const device = useCameraDevice('back'); // 'front' 또는 'back'
useEffect(() => {
const checkPermissions = async () => {
try {
console.log('Checking camera permission status...');
if (permissionStatus === 'not-determined') {
console.log('Requesting camera permission...');
const newStatus = await requestPermission();
console.log('New camera permission status:', newStatus);
} else {
console.log('Current permission status:', permissionStatus);
}
} catch (error) {
console.error('Error checking permissions:', error);
Alert.alert('Error', 'An error occurred while checking permissions.');
}
};
checkPermissions();
}, [permissionStatus, requestPermission]);
useEffect(() => {
console.log('Device:', device); // 디바이스 정보 로그 추가
if (device) {
console.log('Camera device loaded:', device);
setLoading(false);
} else {
console.log('No camera device found');
setLoading(false); // No device found 시에도 로딩 상태를 false로 설정
}
}, [device]);
const renderCamera = () => {
if (loading) {
return <Text>Loading camera...</Text>;
}
if (!device) {
return <Text>No camera device found</Text>;
}
if (permissionStatus === 'granted') {
return <Camera style={styles.camera} device={device} isActive={true} photo={true}/>;
} else {
return (
<View style={styles.noPermission}>
<Text>Camera access is not granted. Please enable camera permissions in settings.</Text>
</View>
);
}
};
return (
<View style={styles.container}>
{renderCamera()}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
camera: {
width: '100%',
height: '100%',
},
noPermission: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
});
export default CameraScreen;