[React Native Expo] 카메라 갤러리 여러장 불러오기 + 크롭기능 (prebuild)

일단 expo에서는 사진 picker기능을 지원한다

https://docs.expo.dev/versions/latest/sdk/imagepicker/

Use an image picker

위 링크로 들어가면 expo버전 사진불러오기 기능설정이 잘 설명이 되어있다.

근데 한가지 문제가 있었다

바로 멀티셀렉트 기능과 크롭기능이 중복 사용이 불가능하단점..

하지만 난 이 두가지를 중복 구현을 해야하는 미션을 받았다...

 

그래서 그냥 prebuild해서 써드파티라이브러리 갖다 쓰기로함..

 

https://github.com/ivpusic/react-native-image-crop-picker

GitHub - ivpusic/react-native-image-crop-picker: iOS/Android image picker with support for camera, video, configurable compressi

 

사용한 라이브러리

 

참고로 저 라이브러리를 쓰려면 android랑 ios파일을 좀 건드려야하는데

위의 expo picker를 설치하면 변경되는 사항이랑 라이브러리에서 수정해야하는 사항이 똑같았다

그래서 expo picker를 설치하고 prebuild를 하게되면 써드파티라이브러리 설명에서 수정하라고한 부분이 이미 다 적용이 되어있어서

딱히 네이티브 코드를 건드릴 필요가 없었다;

다만 전면카메라 사용할 경우에만 AndroidManifast가서

  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
  <uses-feature android:name="android.hardware.camera" android:required="false" />
  <uses-feature android:name="android.hardware.camera.front" android:required="false" />

요 3줄만 추가해주면된다.

 

  const [ImageSelect, setImageSelect] = useState([]);
  const pickImageAsync = async () => {
    await ImagePicker.openPicker({
      multiple: true,
      loadingLabelText: "사진 선택중...",
      compressImageQuality: 1,
    }).then(async (images) => {
      const result = [];
      for await (const image of images) {
        const img = await ImagePicker.openCropper({
          mediaType: "photo",
          path: image.path,
          freeStyleCropEnabled: true,
          includeBase64: true,
        });
        console.log(img);
        result.push(img);
      }
      setImageSelect(result);
    });
  };
  const pickCameraAsync = async () => {
    ImagePicker.openCamera({
      cropping: true,
      useFrontCamera: false,
      showCropFrame: true,
      compressImageQuality: 1,
      freeStyleCropEnabled: true,
      includeBase64: true,
    }).then((image) => {
      setImageSelect([image]);
    });
  };

그러고 이렇게 코드를 추가해주면 완성

완성