react-native-image-picker

1. Image Picker 라이브러리 설치

npm install --save react-native-image-picker

2. Android 접근 권한 설정하기

Android

android/app/src/main/AndroidManifest.xml

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

IOS

ios/project-name/Info.plist

<key>NSCameraUsageDescription</key>
<string>카메라 사용 권한은 이미지 촬영 및 첨부를 위해 필요합니다.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>카메라 사용 권한은 이미지 촬영 및 첨부를 위해 필요합니다.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>카메라 사용 권한은 이미지 촬영 및 첨부를 위해 필요합니다.</string>

---

3. launchImageLibrary 사용

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

1. 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을 넣으면 무제한으로 선택 가능

2. callback 함수의 파라미터

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

import ImagePicker from 'react-native-image-picker';

launchImageLibrary(
      {
        mediaType: 'photo',
        maxWidth: 512,
        maxHeight: 512,
        includeBase64: false,
        quality: 1,
        selectionLimit: 0, // 0으로 설정하면 여러 개의 이미지 선택 가능
      },
      async res => {
        if (res.didCancel) {
          console.log('User cancelled image picker');
        } else if (res.errorCode) {
          console.log('ImagePicker Error: ', res.errorMessage);
        } else {
          const assets = res.assets; // 선택한 모든 이미지들
          console.log('Selected assets:', assets);
       },
    );

전체 코드로 보면 다음과 같다.

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

const Filter = () => {
  const navigation = useNavigation();

  // 업로드 상태를 나타내기 위한 변수
  const [isUploading, setIsUploading] = useState(false);

  // 이미지를 선택하는 함수
  const onSelectImage = () => {
     // 업로드 상태를 true로 설정
     setIsUploading(true);
     
    launchImageLibrary(
      {
        mediaType: 'photo',
        maxWidth: 512,
        maxHeight: 512,
        includeBase64: false,
        quality: 1,
        selectionLimit: 0, // 0으로 설정하면 여러 개의 이미지 선택 가능
      },
      async res => {
        if (res.didCancel) {
          console.log('User cancelled image picker');
        } else if (res.errorCode) {
          console.log('ImagePicker Error: ', res.errorMessage);
        } else {
          const assets = res.assets; // 선택한 모든 이미지들
          console.log('Selected assets:', assets);

         

          // 필요한 Presigned URL 개수만큼 요청
          const presignedUrls = await getPresignedUrls(assets.length);

          // 각 이미지에 대해 Presigned URL을 사용하여 업로드
          const imageUrls = await Promise.all(
            assets.map((asset, index) =>
              uploadImageToS3(asset, presignedUrls[index]),
            ),
          );

          console.log('Uploaded image URLs:', imageUrls);
          navigation.navigate('Filter1', {imageUrls});
          setIsUploading(false);
        }
      },
    );
  };
  ...

참고
https://adjh54.tistory.com/206#google_vignette
study: 리네다기 | 8장 - react-native-image-picker
react-native 갤러리 사진 불러오기 (react-native-community/cameraroll 사용)
RN) ImagePicker