REACT-NATIVE-imagePicker

권한 얻기 

$ yarn add react-native-permissions

ios/Podfile

permissions_path = '../node_modules/react-native-permissions/ios'
//카메라
pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
//위치 정확하게 가져오기(베터리 소모량 많음)
pod 'Permission-LocationAccuracy', :path => "#{permissions_path}/LocationAccuracy"
//위치 항상 가져오기
pod 'Permission-LocationAlways', :path => "#{permissions_path}/LocationAlways"
//위치 사용할때만 가져오기
pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse"
//푸시 알림
pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications"
//사진첩
pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"

ios/[projectName]/App/Info.plist

<key>NSCameraUsageDescription</key>
<string>사진 촬영을 위해 카메라 권한이 필요합니다.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>위치 확인을 위해서 위치 권한이 필요합니다.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>위치 확인을 위해서 위치 권한이 필요합니다.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>위치 확인을 위해서 위치 권한이 필요합니다.</string>
<key>NSMotionUsageDescription</key>
<string>위치 확인을 위해서 위치 권한이 필요합니다.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>사진 선택을 위해 라이브러리 접근 권한이 필요합니다.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>사진 선택을 위해 라이브러리 접근 권한이 필요합니다.</string>

설명 안해주면 앱 출시 할때 거절 먹음

$ pod install

 

 

이미지 피커 설치하기 

$ yarn add react-native-image-crop-picker
//촬영해서 업로드 하는 경우에 사진 용량이 너무 커서 앱단에서 미리 리사이징이 필요함
$ yarn add react-native-image-resizer 
$ npx pod-install

=> 백에서 리사이징 하는 것 보다는 프론트에서 하는게 더 낫다 .

 

import ImagePicker from "react-native-image-crop-picker";
import ImageResizer from "react-native-image-resizer";

  const [preview, setPreview] = React.useState<{ uri: string }>();
  //console.log(preview);
  const [image, setImage] = React.useState<{
    uri: string;
    name: string;
    type: string;
  }>();
  const onResponse = React.useCallback(async (response) => {
    console.log(response.width, response.height, response.exif);
    setPreview({ uri: `data:${response.mime};base64,${response.data}` });
    const orientation = (response.exif as any)?.Orientation;
    console.log("orientation", orientation);
    return ImageResizer.createResizedImage(
      response.path,
      600,
      600,
      response.mime.includes("jpeg") ? "JPEG" : "PNG",
      100,
      0
    ).then((r) => {
      console.log(r.uri, r.name);

      setImage({
        uri: r.uri,
        name: r.name,
        type: response.mime,
      });
    });
  }, []);
  const onChangeFile = React.useCallback(() => {
    return ImagePicker.openPicker({
      includeExif: true,
      includeBase64: true,
      mediaType: "photo",
    })
      .then(onResponse)
      .catch(console.log);
  }, [onResponse]);
  
  {preview && <Image source={preview} style={{ height: 200, borderRadius: 20 }} />}
<Pressable onPress={onChangeFile}>
	<Text>갤러리 열기</Text>
</Pressable>

 

 

 

 

 

 

 

 

 

 

https://mfact12.tistory.com/entry/React-Native-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-%EC%98%88%EC%A0%9C

React Native 파일 업로드 예제