react-native-image-picker 모듈 ! 사진 촬영, 갤러리 이미지 선택 라이브러리 를 알아보자

www.npmjs.com/package/react-native-image-picker

react-native-image-picker

react-native-image-picker 이라는 라이브러리를 소개 해드립니다!!!!

 

첫 번째로는 

android/app/main/AndroidManifest.ml 에

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

이렇게 두줄을 

넣어주세요!

 

그뒤로 코드입니다!

import ImagePicker from 'react-native-image-picker';
 
const [ img, setImageSource ] = useState("");  // 이미지를 img변수에 할당시킬겁니다!

function pickImg() { 
  const options = {
    title: 'Select Avatar', //이미지 선택할 때 제목입니다 ( 타이틀 ) 
    customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }], // 선택 버튼을 커스텀 할 수 있습니다.
    storageOptions: {
      skipBackup: true,	// ios인 경우 icloud 저장 여부 입니다!
      path: 'images',
    },
  };

  /**
   * The first arg is the options object for customization (it can also be null or omitted for default options),
   * The second arg is the callback which sends object: response (more info in the API Reference)
   */
  ImagePicker.showImagePicker(options, (response) => {
    console.log('Response = ', response);

    if (response.didCancel) {
      console.log('User cancelled image picker');
    } else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    } else if (response.customButton) {
      console.log('User tapped custom button: ', response.customButton);
    } else {
      // You can also display the image using data:
      // const source = { uri: 'data:image/jpeg;base64,' + response.data };
      setImageSource(response.uri); // 저는 여기서 uri 값을 저장 시킵니다 !
    }
  });
}

/* return 코드
{img ?   // 이미지가 있으면 라이브러리에서 받아온 이미지로 출력, 없으면 디폴트 이미지 출력!
	<TouchableOpacity style={styles.imgWrapper} onPress={()=>pickImg()}>
		<Image source={{uri: img}} style={styles.imgStyle}/>
	</TouchableOpacity>  
	:
	<TouchableOpacity style={styles.imgWrapper} onPress={()=>pickImg()}>
		<Image source={defaultImg} style={styles.imgStyle}/>
	</TouchableOpacity>
}

                
*/

 

일단 response 값으로 uri나 data 등등 값이 오는데요 여기서 저는 uri 만 필요하기 때문에 setImageSource에 uri를 

저장하고 img에 넣어서 img로 프로필 사진 받아오는 코드를 작성해봤는데요

const options 에

 

const options = {

        title: '사진',

        takePhotoButtonTitle: '카메라',

        chooseFromLibraryButtonTitle: '이미지 선택',
		
        cancelButtonTitle: '취소'
        
      };

이렇게 설정을 해두시면 자기가 원하는 텍스트로 커스텀이 가능합니다 ! 

 

디폴트 이미지

커스텀 한 이미지

 

이미지를 불러와서 저장

 

이렇게 이미지를 저장하고 카메라를 찍을 수 있는 라이브러리를 사용해봤습니다~!~!