[React Native] image-picker (이미지 업로드)

카테고리 : Development
태그: React-Native · reactnative · Android · IOS · react-native-image-picker · react-native-permissions · PERMISSIONS
등록일: 2024년 01월 02일
최근 업데이트: 2024년 01월 02일

---

• 🔥 1. 사전 설치
• 🔥 2. IOS
  • Podfile 추가
  • info.plist 추가
• 🔥 3. 실행
  • 권한 허용 알림
  • 이미지 업로드 샘플 코드

🔥 1. 사전 설치

yarn add react-native-image-picker
yarn add react-native-permissions

🔥 2. IOS

Podfile 추가

info.plist 추가

🔥 3. 실행

권한 허용 알림

useEffect(() => {
  if (Platform.OS === "android") {
    check(PERMISSIONS.ANDROID.CAMERA)
      .then((result) => {
        if (result === RESULTS.DENIED || result === RESULTS.GRANTED) {
          return request(PERMISSIONS.ANDROID.CAMERA);
        } else {
          console.log(result);
          throw new Error("카메라 지원 안 함");
        }
      })
      .catch(console.error);
  } else {
    check(PERMISSIONS.IOS.PHOTO_LIBRARY)
      .then((result) => {
        if (
          result === RESULTS.DENIED ||
          result === RESULTS.LIMITED ||
          result === RESULTS.GRANTED
        ) {
          return request(PERMISSIONS.IOS.PHOTO_LIBRARY);
        } else {
          console.log(result);
          throw new Error("카메라 지원 안 함");
        }
      })
      .catch(console.error);
  }
}, []);

이미지 업로드 샘플 코드

export default function ExpertDescriptionInfo() {
    const [selectedImage, setSelectedImage] = useState('');
    const chooseImage = () => {
        const options: ImageLibraryOptions = {
          mediaType: 'photo', // 추가: 원하는 미디어 타입('photo', 'video' 등)을 지정.
        };

        launchImageLibrary(options, (response: ImagePickerResponse) => {
          // 이미지 라이브러리로부터의 응답 처리
          if (response.didCancel) {
            console.log('사용자가 이미지 선택을 취소했습니다.');
          } else if (response.errorCode === 'camera_unavailable') {
            console.log('카메라 사용이 불가능 합니다');
          } else if (response.errorCode === 'permission') {
            console.log('카메라 권한 설정이 잘못되었습니다');
          } else {
            console.log(response);
            const selectedImageUri = response.assets && response.assets[0]?.uri;

            if (selectedImageUri) {
              setSelectedImage(selectedImageUri);
              setProfile(selectedImageUri.uri);
            } else {
              // 선택된 이미지가 없는 경우의 처리
            }
          }
        });
    };
    return (
            {selectedImage && (
                <Image
                    style={{
                        width: 150,
                        height: 150,
                        borderRadius: 100,
                    }}
                    source={{uri: selectedImage.uri}}
                />
            )
        );
    }