[React Native] 이미지 및 사진 권한 설정하기

카테고리 : Development
태그: development · React-Native · 사진 권한 · react-native-permissions · READ_MEDIA_IMAGES · READ_MEDIA_VIDEO · READ_MEDIA_AUDIO · WRITE_EXTERNAL_STORAGE

🔥 1.Dependency 설치


$ npm install --save react-native-permissions
# --- or ---
$ yarn add react-native-permissions

🔥 2. IOS 환경 설정

IOS 설정은 공식 라이브러리 세팅 방법을 참고하면 금방할 수 있으니 생략

🔥 3. Android 환경 설정

사진과 동영상을 촬영하기 위해서는 android.permission.CAMERA, android.permission.READ_EXTERNAL_STORAGE, android.permission.WRITE_EXTERNAL_STORAGE 권한을 필요로 한다.

🔥 4. 권한 적용하기

TargetSDK 33부터는 READ_MEDIA_IMAGES  READ_MEDIA_VIDEO  READ_MEDIA_AUDIO에 대한 권한들을 Manifest에 선언해 주고  해당 이름의 권한으로 권한 체크 및 권한 요청을 진행해야함 SDK 33 미만은 READ_EXTERNAL_STORAGE , WRITE_EXTERNAL_STORAGE 권한으로 접근 할 수 있다

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <!-- SDK >= 33 permissions for media   -->
    <uses-permission android:name="android.permission.READ_MEDIA_AUDIO"/>
    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
    <uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>

🔥 5. 권한 요청하기

TargetSDK 33부터는 ”READ_MEDIA_IMAGES”  “READ_MEDIA_VIDEO”  “READ_MEDIA_AUDIO”에 대한 권한들을 Manifest에 선언해 주고  해당 이름의 권한으로 권한 체크 및 권한 요청을 진행해야함

// 카메라 권한 요청 예시
const requestCameraPermission = async (): Promise<boolean> => {
  try {
    const results = await requestMultiple([
      Platform.OS === "ios"
        ? PERMISSIONS.IOS.CAMERA
        : PERMISSIONS.ANDROID.CAMERA,
    ]);

    return (
      results[
        Platform.OS === "ios"
          ? PERMISSIONS.IOS.CAMERA
          : PERMISSIONS.ANDROID.CAMERA
      ] === RESULTS.GRANTED
    );
  } catch (error) {
    console.error(error);
    return false; // 예외 발생 시 false 반환
  }
};

// 비디오 권한 요청
const requestVideoPermission = async (): Promise<boolean> => {
  try {
    let permissions: Permission[];
    // 이건 안드로이드 권한 요청
    if (Platform.OS === "android") {
      //SDK가 33버전 이상인 경우는 아래와 같은 권한을 멀티로 요청
      permissions =
        Platform.Version >= 33
          ? [
              PERMISSIONS.ANDROID.READ_MEDIA_IMAGES,
              PERMISSIONS.ANDROID.READ_MEDIA_VIDEO,
            ]
          : [PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE];
      // 이건 IOS 권한 요청
    } else if (Platform.OS === "ios") {
      permissions = [PERMISSIONS.IOS.PHOTO_LIBRARY];
    } else {
      return false;
    }

    const results: Record<Permission, PermissionStatus> = await requestMultiple(
      permissions
    );

    return permissions.every(
      (permission) => results[permission] === RESULTS.GRANTED
    );
  } catch (error) {
    console.error(error);
    return false;
  }
};