[RN][Expo] expo-camera 적용

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

https://velog.io/@tchaikovsky/RN-EXPO-카메라갤러리-기능-구현

RN + EXPO) 카메라기능 구현