study: 리네다기 | 8장 - react-native-image-picker

react-native-image-picker 를 사용하려면 OS 별 설정을 해줘야 한다

ios/[project]/Info.plist

(...)
  <key>NSPhotoLibraryUsageDescription</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/AndoridManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.[프로젝트 명]">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    (...)

import {launchCamera, launchImageLibrary} from 'react-native-image-picker';

launchCamera(options, callback); launchCamera 는 미지를 카메라로 촬영할 때 사용한다
options 는 생략 가능하고 callback 은 이미지 선택 후 호출되는 함수다

launchImageLibrary(options, callback);
launchImageLibrary() 는 갤러리에서 이미지를 선택할 때 사용

options 속성

• mediaType: photo 또는 video
• maxWidth: 이미지의 가로 폭을 리사이즈할 때 사용합니다.
• maxHeight: 이미지의 세로 폭을 리사이즈할 때 사용합니다.
• videoQuality: 영상을 선택할 때 화질을 설정합니다. iOS에서는 low, medium, high를 선택할 수 있습니다. 안드로이드에서는 low 또는 high를 선택할 수 있습니다.
• quality: 이미지 화질입니다. 0부터 1 사이의 값을 입력할 수 있습니다.
• includeBase64: 이 값을 true로 지정하면 이미지를 base64 형식으로 인코딩합니다.
• saveToPhotos: launchCamera에서만 사용하는 설정으로 이 값을 true로 설정하면 카메라로 촬영한 후 이미지를 갤러리에 따로 저장합니다. 이 옵션을 사용하려면 AndroidManifest.xml에서 WRITE_EXTERNAL_STORAGE 권한을 설정해야 합니다.
• selectionLimit: 선택할 이미지의 수를 설정합니다. 기본값은 1이며 0을 넣으면 무제한으로 선택할 수 있습니다.

callback 함수의 파라미터

• didCancel: 사용자가 선택을 취소하면 true가 됩니다.
• errorCode: 에러에 대한 코드 정보를 지니고 있습니다. 에러의 종류는 다음 링크에서 확인할 수 있습니다(https://bit.ly/3lLzJmX).
• errorMessage: 에러 메시지를 지니고 있습니다. 개발 과정에서 디버깅할 때만 사용합니다.
• assets: 선택한 이미지의 정보 객체 배열입니다. asset 객체는 다음 정보들을 지니고 있습니다.
  - base64: base64로 인코딩된 이미지의 값을 지니고 있습니다.
  - uri: 선택한 이미지의 경로입니다.
  - width: 선택한 이미지의 가로 폭입니다.
  • height: 선택한 이미지의 세로 폭입니다.
  • fileSize: 선택한 이미지의 크기입니다.
  • type: 선택한 이미지의 파일 타입입니다.
  • fileName: 선택한 파일의 이름입니다.

Android 기기에 사진 추가

iOS 는 설치 시 기본 사진이 들어있는데
Android 에는 갤러리가 비어있다

안드로이드 에뮬레이터로 브라우저에 접속해
이미지를 2초간 클릭하면 다운로드할 수 있다

react-native-image-picker

const onSelectImage = () => {
    launchImageLibrary(
      {
        mediaType: 'photo',
        maxWidth: 512,
        maxHeight: 512,
        includeBase64: Platform.OS === 'android',
      },
      res => {
        console.log(res);
      },
    );
  };

갤러리에서 이미지를 선택하면 callback 이 실행된다

onSelectImage라는 함수를 만들어서, 이미지를 선택하고 선택한 이미지의 정보를 
콘솔에 출력하도록 구현해줬습니다. launchImageLibrary를 사용할 때 
안드로이드의 경우에만 includeBase64 값이 true가 되도록 설정해줬는데요. 
추후 업로드할 때 uri에서 직접 파일을 읽는 과정에서 권한 오류가 발생할 수 있기 때문입니다. 
따라서 안드로이드의 경우에는 이미지를 base64로 인코딩해두고, 
업로드할 때 base64로 인코딩된 결괏값을 사용해 업로드를 진행합니다
(이 권한 이슈는 Google Photo를 사용하는 기기에서 발생합니다).

애플 실리콘이 탑재된 맥OS를 사용하는 경우 이미지를 선택했을 때 
아무런 반응이 없을 수 있습니다. 그런 경우에는 우선 시뮬레이터를 종료하세요. 
그리고 Xcode로 ios/[프로젝트 명]/PublicGalleryJohndoe.xcworkspace 파일을 열고, 
Product > Clean Build Folder를 누르세요.
이어서 Xcode 상단의 프로젝트명 우측에 있는 영역을 눌러서 iPhone 12 또는 
다른 원하는 디바이스를 선택하고 좌측의 재생 버튼을 눌러서 다시 시도해보세요. 
추후 yarn ios를 다시 실행해야 하는 상황이 오면 재생 버튼을 다시 누르세요.

나는 m1 인데 왜 아무 일도 없을까..