react-native 사진 찍기 (react-native-community/cameraroll 사용)

1. 라이브러리 설치

npm install @react-native-community/cameraroll --save

cd ios && pod install

사진은 디바이스에서 사진 관련 권한을 요구하는데, ios에서는 Info.plist에서 권한 설명 문구를 정의하는 것으로, 안드로이드는 AndroidManifest.xml 에서 명확히 권한을 설정해줍니다.

ios/${프로젝트 이름}/Info.plist

    <key>NSPhotoLibraryUsageDescrption</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>NSCameraUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to use your camera</string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
  </dict>
</plist>

android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="{프로젝트 이름}">

 	<uses-permission android:name="android.permission.INTERNET" />
    <!-- Required -->
    <uses-permission android:name="android.permission.CAMERA" />

    <!-- Include this only if you are planning to use the camera roll -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

2. 카메라 띄우기

카메라를 띄우는 것은 간단합니다.

import { RNCamera } from 'react-native-camera';
import { useStores } from 'app/stores';

const Camera = () => {
  // useRef로 camera를 위한 ref를 하나 만들어 줍니다.
  const cameraRef = useRef(null);
  const [isTakingPhoto, setIsTakingPhoto] = useState(false);

  const takePhoto = async (cameraRef) => {
    //퀄리티는 0.1~ 1.0 사이로 지정해줍니다.
    const options = { quality: 0.3, base64: false };
    try {
      const data = await cameraRef.current.takePictureAsync(options);
      data.checked = true;
      console.log('data', data);
    } catch (error) {
      console.log('[camera takePicuture Error]', error);
    } finally {
      setIsTakingPhoto(false);
    }
  };

  return (
    	<View style={{ flex: 1, backgroundColor: 'black' }}>
              <View
                style={{
                  width: '100%',
                  height: WINDOW_WIDTH,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <RNCamera
                  ref={cameraRef}
                  style={{ width: '100%', height: WINDOW_WIDTH }}
                 
                  androidCameraPermissionOptions={{
                    title: 'Permission to use camera',
                    message: 'We need your permission to use your camera',
                    buttonPositive: 'Ok',
                    buttonNegative: 'Cancel',
                  }}
                  ratio="1:1"
                  //captureAudio 를 써주지 않으면 크래시가 난다.
                  captureAudio={false}
                  //type은 전면/후면 카메라
                  type={RNCamera.Constants.Type.back}
                />
              </View>
              <View
                style={{
                  justifyContent: 'space-around',
                  alignItems: 'center',
                  alignContent: 'center',
                  flexDirection: 'row',
                  flex: 1,
                }}>
                <Button
                  type="clear"
                  onPress={() => {
                    setIsTakingPhoto(true);
                    takePhoto(cameraRef);
                  }}
                  disabled={isTakingPhoto}
                  containerStyle={{
                    width: 90,
                    height: 90,
                    borderRadius: 60,
                  }}
                  buttonStyle={{
                    backgroundColor: 'white',
                    padding: 0,
                    aspectRatio: 1,
                    width: 90,
                    height: 90,
                    borderRadius: 60,
                  }}
                  icon={
                    <FontAwesomeIcon name="camera" color="#EF5B5B" size={30} />
                  }
                />
              </View>
    	</View>
    	
    );
};

export default Camera;

카메라가 정상적으로 찍히는 것을 확인할 수 있습니다.

추가로 찍은 사진을 갤러리에 저장하는 기능도 제공해줍니다.

import CameraRoll from "@react-native-community/cameraroll";

위에서 사용한 takePhoto함수 안에 cameraRoll.saveToCameraToll 메서드를 사용하면 간단하게 갤러리에 저장이 됩니다.

const takePhoto = async (cameraRef) => {
    const options = { quality: 0.3, base64: false };
    try {
      const data = await cameraRef.current.takePictureAsync(options);
      data.checked = true;
      console.log('data', data);
      	if(data) {
        	const result = await CameraRoll.saveToCameraRoll(data.uri);
      	}
      }
    } catch (error) {
      console.log('[camera takePicuture Error]', error);
    } finally {
      setIsTakingPhoto(false);
    }
  };

react-native-community/cameraroll를 사용함으로써 react-native에서 카메라 관련 기능을 간단하게 구현할 수 있습니다.