갤러리로부터 사진을 가져오려 한다면??

expo install expo-image-picker

https://docs.expo.io/versions/latest/sdk/imagepicker/#installation

1. 사진 접근권한을 받는 법.

   (async () => {
       if (Platform.OS !== 'web') {
           const { granted } = await ImagePicker.requestMediaLibraryPermissionsAsync();
           if (granted === false)
               alert('카메라 접근권한이 필요합니다 😢');
       }
   })();
   

2. onPress 함수 만들기.

   const [image, setImage] = useState<string | null>(null);
   const pickImage = async () => {
   		// 접근권한을 확인하는 코드
   
       let result = await ImagePicker.launchImageLibraryAsync({
           mediaTypes: ImagePicker.MediaTypeOptions.All,
           allowsEditing: true,
           quality: 1,
         });
   
       if (!result.cancelled) {
   				setImage(result.uri);
   				console.log(image);
       }
   };
   

   공홈의 옵션을 참고하도록 하자.

   allowsEditing : 사진을 업로드할 때 크기 변경할 수 있도록 quality : 사진의 화질 압축 (0~1.0)

   allowsMultipleSelection: (주의) web only

3. 사진을 선택하고 보기

   return (
   		<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
   				<Button title="사진 추가" onPress={pickImage} />
   				{ image && <Image source={{ uri: image }} style={{ width: 100, height: 100}}/> }
   		</View>
   )
   

   • IOS Simulator에선 이상하게 Choose과 Cancel 버튼이 작동하지 않는다.

   실제 핸드폰에서 expo 돌려보면 잘 동작한다.

여러 사진을 가져오고 싶으면..?

yarn add expo-image-picker-multiple

import { ImageBrowser } from 'expo-image-picker-multiple';

<ImageBrowser
  max={4}
  onChange={(num, onSubmit)  => {
    
  }}
  callback={(callback) => {

  }}
/>

💫 TypeScript 적용이 안되어 있어서 좀 고생해야 할거 같네...

일단 포기해야겠다..