0. 설치
npx expo install expo-camera
config plugin이 프로젝트에 있는 경우
{
"expo": {
"plugins": [
[
"expo-camera",
{
"cameraPermission": "Allow $(PRODUCT_NAME) to access your camera."
}
]
]
}
}
1. 카메라 권한
카메라 접근 권한을 묻고, 접근 권한을 얻으면 카메라 컴포넌트(CameraScreen.js)로 이동
const { status: cameraStatus } = await Camera.requestCameraPermissionsAsync();
// 권한을 획득하면 status가 granted 상태
if (cameraStatus === 'granted') {
navigation.navigate('CameraScreen', {
nextScreen: 'MealtimeScreen'
});
} else {
Alert.alert('카메라 접근 허용은 필수입니다.');
}
2. 카메라 사진 찍기
CameraScreen.js
import { Camera, CameraType, AutoFocus } from 'expo-camera';
const cameraRef = useRef(null);
//카메라 타입 - back, front
const [type, setType] = useState(CameraType.back);
//찍은 이미지
const [capturedImage, setCapturedImage] = useState(null)
const [previewVisible, setPreviewVisible] = useState(false)
//사진 찍을때 호출되는 함수
const takePictureHandler = async () => {
// cameraRef가 없으면 해당 함수가 실행되지 않게 가드
if (!cameraRef.current) return;
// takePictureAsync를 통해 사진을 찍음
// 찍은 사진은 base64 형식으로 저장
await cameraRef.current
.takePictureAsync({
base64: true,
})
.then((data) => {
setPreviewVisible(true);
setCapturedImage(data);
});
};
return (
<RootView>
<Camera
ref={cameraRef}
type={type}
autoFocus={AutoFocus.on}
style={styles.camera}
/>
<View style={styles.touchView}>
<View style={{ width: scale(35) }} />
<TouchableOpacity style={styles.btnView} activeOpacity={0.8} onPress={takePictureHandler} />
<TouchableOpacity activeOpacity={0.8} onPress={() => setType(type == CameraType.back ? CameraType.front : CameraType.back)}>
<AntDesign name="sync" size={30} color="black" />
</TouchableOpacity>
</View>
</RootView>
)
3. 카메라 사진 프리뷰 제공 및 옵션
CameraScreen.js
//다시찍기 클릭시 호출되는 함수
const retakePictureHandler = () => {
setPreviewVisible(false);
setCapturedImage(null);
};
//완료 클릭시 호출되는 함수
const uploadPictureHandler = () => {
let params = {}
navigation.navigate(nextScreen, params)
}
//previewVisible && capturedImage ? (...) : (...) 를 통해 사진 찍는 버튼 클릭 시 프리뷰 제공 및 옵션 제공
return previewVisible && capturedImage ? (
<RootView>
<Image source={capturedImage} style={styles.camera} />
<View style={styles.touchView}>
<TouchableOpacity activeOpacity={0.6} onPress={retakePictureHandler}>
<Text style={styles.text}>다시찍기</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.6} onPress={uploadPictureHandler}>
<Text style={styles.text}>완료</Text>
</TouchableOpacity>
</View>
</RootView>
) : (
<RootView>
<Camera
ref={cameraRef}
type={type}
autoFocus={AutoFocus.on}
style={styles.camera}
/>
<View style={styles.touchView}>
<View style={{ width: scale(35) }} />
<TouchableOpacity style={styles.btnView} activeOpacity={0.8} onPress={takePictureHandler} />
<TouchableOpacity activeOpacity={0.8} onPress={() => setType(type == CameraType.back ? CameraType.front : CameraType.back)}>
<AntDesign name="sync" size={30} color="black" />
</TouchableOpacity>
</View>
</RootView>
)
* 참조
https://docs.expo.dev/versions/latest/sdk/camera/#example-appjson-with-config-plugin
Camera
A React component that renders a preview for the device's front or back camera.
docs.expo.dev
https://velog.io/@tchaikovsky/RN-EXPO-카메라갤러리-기능-구현
RN + EXPO) 카메라기능 구현
expo-camera는 디바이스의 카메라에 대해 미리보기를 랜더링하는 기능을 제공합니다.또한 미리보기에서 줌, AutoFocus, 화이트 밸런스, 플래시 모드 등 다양한 카메라 기능을 조작할 수 있게 도와줍니
velog.io
'Framework > React Native' 카테고리의 다른 글
[RN][Expo] Semi-Calories 개발 도움됐던 Document 정리 (0) | 2023.08.25 |
---|---|
[RN][Expo] Axios 를 이용해 API(Spring)와 통신 (0) | 2023.08.13 |
[RN][Expo] expo-media-library 앨범 사진 onEndReached로 계속 가져오기 (0) | 2023.08.01 |
[RN][Expo] expo-media-library 적용 (0) | 2023.08.01 |
[RN][Expo] 절대경로 설정 (0) | 2023.07.05 |