Inflearn brand logo image

인프런 커뮤니티 질문&답변

김민서님의 프로필 이미지
김민서

작성한 질문수

[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

[8-5] 프로필 수정 기능 구현하기

안드로이드에서 react-native-image-crop-picker의 설정 옵션에 대한 문제

작성

·

26

0

질문 작성시 꼭 참고해주세요

  1. 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.

  2. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.

  3. 개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.

  4. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.

     

(에러 일부만 자르거나 일부만 복사하지말아주세요) 


안드로이드 환경에서 프로필 사진 수정 강의를 수강중에 계속 에러가 발생해서 진행하지 못했는데

제가 문제원인을 추론해봤습니다.

우선 문제가 발생한 부분은

AddLocationScreen에서는 여러가지 사진을 등록해도 괜찮지만 프로필 사진은 단 한장만 등록해야하기 때문에

useImagePicker 훅에 single과 multiple mode를 설정하는 과정에서 발생했습니다 .

강의의 모든 코드를 따라서 적고 프로필 수정을 하기위해 actionSheet에서 [앨범에서 사진선택]을 누르면

권한을 확인해 달라는 Toast오류 메시지가 발생했습니다. 하지만 AddLocation화면에서 이미 권한을 허용해 줬기 때문에

권한으로 인한 문제는 아니라 파악했고

useImagePicker 훅의 handleChangeImage 함수에서 에러 로그를 찍어본 결과

java.lang.IllegalArgumentException: Max items must be higher than 1

이러한 로그를 확인 할 수 있었습니다 .

 

그래서 추측한 결과는
강사님 코드에서

  ImageCropPicker.openPicker({
      mediaType: 'photo',
      multiple: true,
      includeBase64: true,
      maxFiles: mode === 'multiple' ? 5 : 1,
    })

이 부분이 multiple은 true로 되어있지만, singlemode로 들어올 경우 maxFiles가 1로 설정되기 때문에

두 옵션이 충돌이 발생하는걸로 추측됩니다 .

 

그래서 저는 아래와 같이 일단 수정해서 문제를 해결했습니다.

const handleChangeImage = () => {
    ImageCropPicker.openPicker({
      mediaType: 'photo',
      multiple: mode === 'multiple',
      includeBase64: true,
      ...(mode === 'multiple' && { maxFiles: 5 }),
    })
      .then(images => {
        const imageArray = Array.isArray(images) ? images : [images];
        const formData = getFormDataImages('images', imageArray);
        uploadImages.mutate(formData, {
          onSuccess: data =>
            mode === 'multiple' ? addImageUris(data) : replaceImageUri(data),
          onSettled: () => onSettled && onSettled(),
        });
      })
      .catch(error => {
        if (error.code !== 'E_PICKER_CANCELLED') {
          console.log('[error]', error);
          Toast.show({
            type: 'error',
            text1: '권한을 허용했는지 확인해주세요.',
            position: 'bottom',
          });
        }
      });
  };

multiple옵션은 mode==='multiple' 코드를 통해 mode의 값에 따라 true / false로 주어지게 하였고
maxFiles 옵션또한 mode가 multiple인 경우에만 maxFiles:5라는 옵션이 주어지게 하였습니다.
아마 multiple옵션이 false로 주어지면 maxFiles가 자동으로 1로 설정되어서 발생하는 충돌문제 였던 것 같습니다.
강의 들으시는 분들에게 도움이 되었으면 합니다 .

답변

답변을 기다리고 있는 질문이에요
첫번째 답변을 남겨보세요!
김민서님의 프로필 이미지
김민서

작성한 질문수

질문하기