Commit @7d5aa6b19b73682fd4fd974e65b101b804288aa9 - yjyoon/대구제주dip2024

ryuyoonju 2024-08-01

240801 류윤주

@7d5aa6b19b73682fd4fd974e65b101b804288aa9

0d55c0e

7d5aa6b

src/screen/CameraScreen.js

--- src/screen/CameraScreen.js

+++ src/screen/CameraScreen.js


-import React, { useEffect, useState, useRef } from 'react';
-import { View, Button, StyleSheet, Alert, Text, Linking } from 'react-native';
-import { Camera, useCameraDevices } from 'react-native-vision-camera';
-import { useNavigation } from '@react-navigation/native';
+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 [hasPermission, setHasPermission] = useState(false);
-    const [isDeviceReady, setIsDeviceReady] = useState(false);
-    const devices = useCameraDevices();
-    const device = devices.front;
-    const camera = useRef(null);
-    const navigation = useNavigation();
+  const [loading, setLoading] = useState(true);
+  const { status: permissionStatus, requestPermission } = useCameraPermission();
+  const device = useCameraDevice('back'); // 'front' 또는 'back'
 
-    // Function to check and request camera permission
-    const checkPermission = async () => {
-        const cameraPermission = await Camera.getCameraPermissionStatus();
-        console.log(cameraPermission)
-        if (cameraPermission === 'granted') {
-            setHasPermission(true);
-            setIsDeviceReady(true);
-        } else if (cameraPermission === 'not-determined') {
-            const newCameraPermission = await Camera.requestCameraPermission();
-            if (newCameraPermission === 'granted') {
-                setHasPermission(true);
-                setIsDeviceReady(true);
-            } else {
-                setHasPermission(false);
-                Alert.alert('카메라 권한 필요', '카메라 권한이 필요합니다.', [
-                    { text: '설정으로 이동', onPress: () => Linking.openSettings() },
-                    { text: '취소', style: 'cancel' },
-                ]);
-            }
+  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 {
-            setHasPermission(false);
-            Alert.alert('카메라 권한 필요', '카메라 권한이 필요합니다.', [
-                { text: '설정으로 이동', onPress: () => Linking.openSettings() },
-                { text: '취소', style: 'cancel' },
-            ]); 
+          console.log('Current permission status:', permissionStatus);
         }
+      } catch (error) {
+        console.error('Error checking permissions:', error);
+        Alert.alert('Error', 'An error occurred while checking permissions.');
+      }
     };
 
-    useEffect(() => {
-        // Check permission once on component mount
-        checkPermission();
-    }, []);
+    checkPermissions();
+  }, [permissionStatus, requestPermission]);
 
-    useEffect(() => {
-        // Update the device readiness when the camera device changes
-        if (device) {
-            setIsDeviceReady(true);
-        } else {
-            setIsDeviceReady(false);
-        }
-    }, [device]);
+  useEffect(() => {
+    console.log('Device:', device); // 디바이스 정보 로그 추가
 
-    const handleCapture = async () => {
-        if (camera.current) {
-            try {
-                const photo = await camera.current.takePhoto({
-                    flash: 'off',
-                    qualityPrioritization: 'speed',
-                });
-                console.log('Photo taken:', photo);
-                navigation.navigate('Gps'); // Move to the next screen after capturing photo
-            } catch (error) {
-                console.error('Photo capture error:', error.message);
-                Alert.alert('오류', '사진 캡처 중 오류가 발생했습니다.');
-            }
-        }
-    };
+    if (device) {
+      console.log('Camera device loaded:', device);
+      setLoading(false);
+    } else {
+      console.log('No camera device found');
+      setLoading(false); // No device found 시에도 로딩 상태를 false로 설정
+    }
+  }, [device]);
 
-    if (!hasPermission) {
-        return (
-            <View style={styles.permissionContainer}>
-                <Text>카메라 권한을 요청 중입니다...</Text>
-            </View>
-        );
+  const renderCamera = () => {
+    if (loading) {
+      return <Text>Loading camera...</Text>;
     }
 
-    return (
-        <View style={styles.container}>
-            {isDeviceReady && device ? (
-                <Camera
-                    ref={camera}
-                    style={StyleSheet.absoluteFill}
-                    device={device}
-                    photo={true}
-                    video={false}
-                    isActive={true}
-                />
-            ) : (
-                <View style={styles.buttonContainer}>
-                    <Text>카메라 장치 준비 중...</Text>
-                    <Button title="다음 페이지로 이동" onPress={() => navigation.navigate('Gps')} />
-                </View>
-            )}
-            <Button title="Capture" onPress={handleCapture} style={styles.captureButton} />
+    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',
-    },
-    buttonContainer: {
-        justifyContent: 'center',
-        alignItems: 'center',
-        flex: 1,
-    },
-    captureButton: {
-        position: 'absolute',
-        bottom: 20,
-        alignSelf: 'center',
-    },
-    permissionContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  camera: {
+    width: '100%',
+    height: '100%',
+  },
+  noPermission: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
 });
 
 export default CameraScreen;

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,125 +1,87 @@
1		-import React, { useEffect, useState, useRef } from 'react';
2		-import { View, Button, StyleSheet, Alert, Text, Linking } from 'react-native';
3		-import { Camera, useCameraDevices } from 'react-native-vision-camera';
4		-import { useNavigation } from '@react-navigation/native';
	1	+import React, { useEffect, useState } from 'react';
	2	+import { View, Text, StyleSheet, Alert } from 'react-native';
	3	+import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
5	4
6	5	const CameraScreen = () => {
7		- const [hasPermission, setHasPermission] = useState(false);
8		- const [isDeviceReady, setIsDeviceReady] = useState(false);
9		- const devices = useCameraDevices();
10		- const device = devices.front;
11		- const camera = useRef(null);
12		- const navigation = useNavigation();
	6	+ const [loading, setLoading] = useState(true);
	7	+ const { status: permissionStatus, requestPermission } = useCameraPermission();
	8	+ const device = useCameraDevice('back'); // 'front' 또는 'back'
13	9
14		- // Function to check and request camera permission
15		- const checkPermission = async () => {
16		- const cameraPermission = await Camera.getCameraPermissionStatus();
17		- console.log(cameraPermission)
18		- if (cameraPermission === 'granted') {
19		- setHasPermission(true);
20		- setIsDeviceReady(true);
21		- } else if (cameraPermission === 'not-determined') {
22		- const newCameraPermission = await Camera.requestCameraPermission();
23		- if (newCameraPermission === 'granted') {
24		- setHasPermission(true);
25		- setIsDeviceReady(true);
26		- } else {
27		- setHasPermission(false);
28		- Alert.alert('카메라 권한 필요', '카메라 권한이 필요합니다.', [
29		- { text: '설정으로 이동', onPress: () => Linking.openSettings() },
30		- { text: '취소', style: 'cancel' },
31		- ]);
32		- }
	10	+ useEffect(() => {
	11	+ const checkPermissions = async () => {
	12	+ try {
	13	+ console.log('Checking camera permission status...');
	14	+ if (permissionStatus === 'not-determined') {
	15	+ console.log('Requesting camera permission...');
	16	+ const newStatus = await requestPermission();
	17	+ console.log('New camera permission status:', newStatus);
33	18	} else {
34		- setHasPermission(false);
35		- Alert.alert('카메라 권한 필요', '카메라 권한이 필요합니다.', [
36		- { text: '설정으로 이동', onPress: () => Linking.openSettings() },
37		- { text: '취소', style: 'cancel' },
38		- ]);
	19	+ console.log('Current permission status:', permissionStatus);
39	20	}
	21	+ } catch (error) {
	22	+ console.error('Error checking permissions:', error);
	23	+ Alert.alert('Error', 'An error occurred while checking permissions.');
	24	+ }
40	25	};
41	26
42		- useEffect(() => {
43		- // Check permission once on component mount
44		- checkPermission();
45		- }, []);
	27	+ checkPermissions();
	28	+ }, [permissionStatus, requestPermission]);
46	29
47		- useEffect(() => {
48		- // Update the device readiness when the camera device changes
49		- if (device) {
50		- setIsDeviceReady(true);
51		- } else {
52		- setIsDeviceReady(false);
53		- }
54		- }, [device]);
	30	+ useEffect(() => {
	31	+ console.log('Device:', device); // 디바이스 정보 로그 추가
55	32
56		- const handleCapture = async () => {
57		- if (camera.current) {
58		- try {
59		- const photo = await camera.current.takePhoto({
60		- flash: 'off',
61		- qualityPrioritization: 'speed',
62		- });
63		- console.log('Photo taken:', photo);
64		- navigation.navigate('Gps'); // Move to the next screen after capturing photo
65		- } catch (error) {
66		- console.error('Photo capture error:', error.message);
67		- Alert.alert('오류', '사진 캡처 중 오류가 발생했습니다.');
68		- }
69		- }
70		- };
	33	+ if (device) {
	34	+ console.log('Camera device loaded:', device);
	35	+ setLoading(false);
	36	+ } else {
	37	+ console.log('No camera device found');
	38	+ setLoading(false); // No device found 시에도 로딩 상태를 false로 설정
	39	+ }
	40	+ }, [device]);
71	41
72		- if (!hasPermission) {
73		- return (
74		- <View style={styles.permissionContainer}>
75		- <Text>카메라 권한을 요청 중입니다...</Text>
76		- </View>
77		- );
	42	+ const renderCamera = () => {
	43	+ if (loading) {
	44	+ return <Text>Loading camera...</Text>;
78	45	}
79	46
80		- return (
81		- <View style={styles.container}>
82		- {isDeviceReady && device ? (
83		- <Camera
84		- ref={camera}
85		- style={StyleSheet.absoluteFill}
86		- device={device}
87		- photo={true}
88		- video={false}
89		- isActive={true}
90		- />
91		- ) : (
92		- <View style={styles.buttonContainer}>
93		- <Text>카메라 장치 준비 중...</Text>
94		- <Button title="다음 페이지로 이동" onPress={() => navigation.navigate('Gps')} />
95		- </View>
96		- )}
97		- <Button title="Capture" onPress={handleCapture} style={styles.captureButton} />
	47	+ if (!device) {
	48	+ return <Text>No camera device found</Text>;
	49	+ }
	50	+
	51	+ if (permissionStatus === 'granted') {
	52	+ return <Camera style={styles.camera} device={device} isActive={true} photo={true}/>;
	53	+ } else {
	54	+ return (
	55	+ <View style={styles.noPermission}>
	56	+ <Text>Camera access is not granted. Please enable camera permissions in settings.</Text>
98	57	</View>
99		- );
	58	+ );
	59	+ }
	60	+ };
	61	+
	62	+ return (
	63	+ <View style={styles.container}>
	64	+ {renderCamera()}
	65	+ </View>
	66	+ );
100	67	};
101	68
102	69	const styles = StyleSheet.create({
103		- container: {
104		- flex: 1,
105		- justifyContent: 'center',
106		- alignItems: 'center',
107		- },
108		- buttonContainer: {
109		- justifyContent: 'center',
110		- alignItems: 'center',
111		- flex: 1,
112		- },
113		- captureButton: {
114		- position: 'absolute',
115		- bottom: 20,
116		- alignSelf: 'center',
117		- },
118		- permissionContainer: {
119		- flex: 1,
120		- justifyContent: 'center',
121		- alignItems: 'center',
122		- },
	70	+ container: {
	71	+ flex: 1,
	72	+ justifyContent: 'center',
	73	+ alignItems: 'center',
	74	+ },
	75	+ camera: {
	76	+ width: '100%',
	77	+ height: '100%',
	78	+ },
	79	+ noPermission: {
	80	+ flex: 1,
	81	+ justifyContent: 'center',
	82	+ alignItems: 'center',
	83	+ padding: 20,
	84	+ },
123	85	});
124	86
125	87	export default CameraScreen;

Delete comment