File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import {
StyleSheet,
View,
Text,
TouchableOpacity,
Alert,
Linking,
} from 'react-native';
import React from 'react';
import useCameraApi from '../utils/useCameraAPI.ts';
import {Camera, useCameraDevice} from 'react-native-vision-camera';
import Icon from 'react-native-vector-icons/Entypo.js';
// import {CameraRoll} from '@react-native-camera-roll/camera-roll';
export default function CameraScreen() {
const {
requestStoragePermission,
isPermission,
requestGPSPermission,
isGpsPermission,
sendPhotoFile,
} = useCameraApi();
const device = useCameraDevice('back');
const camera = React.useRef<Camera>(null);
// const [photoPath, setPhotoPath] = React.useState<string | null>(null);
React.useEffect(() => {
// 카메라 및 위치 권한 확인
const checkPermissions = async () => {
await requestStoragePermission(permissionGranted => {
if (!permissionGranted) {
Alert.alert(
'카메라 권한이 없습니다.',
'카메라를 사용하려면 권한을 허용해야 합니다.',
[{text: '설정으로 이동', onPress: () => Linking.openSettings()}],
);
console.log('카메라 권한이 거부되었습니다.');
}
});
await requestGPSPermission(permissionGranted => {
if (!permissionGranted) {
Alert.alert(
'위치 권한이 없습니다.',
'위치를 사용하려면 권한을 허용해야 합니다.',
[{text: '설정으로 이동', onPress: () => Linking.openSettings()}],
);
console.log('위치 권한이 거부되었습니다.');
}
});
};
// 디바이스 확인
if (!device) {
Alert.alert(
'카메라 디바이스가 없습니다.',
'카메라 디바이스를 찾을 수 없습니다.',
);
}
checkPermissions();
}, [requestStoragePermission, requestGPSPermission, device]);
// 사진 찍기
const takePhotoAsync = async () => {
if (camera.current) {
try {
const photo = await camera.current.takePhoto();
// console.log('Photo:', photo); // photo 확인
// setPhotoPath(photo.path);
// await CameraRoll.save(`file://${photo.path}`, {
// type: 'photo',
// });
// 사진 전송
await sendPhotoFile(photo.path);
} catch (error) {
console.error('Error taking photo:', error);
}
}
};
const handleTakePhoto = async () => {
await takePhotoAsync();
};
return (
<View style={{flex: 1}}>
{isPermission && isGpsPermission ? (
device ? (
<>
<Camera
style={{flex: 1}}
device={device}
isActive={isPermission}
ref={camera}
photo={true}
enableLocation={true}
/>
{/* 찍은 사진 렌더링 */}
{/* {photoPath ? (
<Image source={{uri: `file://${photoPath}`}} style={{flex: 1}} />
) : (
<></>
)} */}
<TouchableOpacity
style={styles.takePicture}
onPress={handleTakePhoto}>
<Icon name="circular-graph" size={60} color={'white'} />
</TouchableOpacity>
</>
) : (
<Text>디바이스 없다</Text>
)
) : (
<></>
)}
</View>
);
}
const styles = StyleSheet.create({
takePicture: {
position: 'absolute',
bottom: '5%',
width: '100%',
alignItems: 'center',
justifyContent: 'center',
},
});