Image Picker

1. react native image picker 설치

 

npm i react-native-image-picker

 

npx pod-install ios

 

2. 설치 후 작업 설정

 

ios

 

Info.plist

 

ios - appname - Info.plist

 

<key>NSCameraUsageDescription</key>

<string>카메라 사용 권한은 이미지 촬영 및 첨부를 위해 필요합니다.</string>

<key>NSPhotoLibraryAddUsageDesription</key>

<string>카메라 사용 권한은 이미지 촬영 및 첨부를 위해 필요합니다.</string>

<key>NSPhotoLibraryAddUsageDesription</key>

<string>카메라 사용 권한은 이미지 촬영 및 첨부를 위해 필요합니다.</string>

android - app - src - main - AndroidManifest.xml

 

근데 안드로이드는 설정 안 해도 되나?

 

3. launchImageLibrary 로딩

import { launchImageLibrary } from 'react-native-image-picker';

 

4. 버튼 누르면 이미지 로딩 후 출력 테스트

const onPress = () => {

  launchImageLibrary({}, res => {

    console.log('launchImageLibrary : ', res);

  });

}

 

그러면 다음과 같은 정보 출력

 

1. fileName: "38B7D56B-D214-41ED-A792-99438189F640.jpg"
2. fileSize: 1484524
3. height: 2002
4. type: "image/jpg"
5. uri: "file:///Users/pi/Library/Developer/CoreSimulator/Devices/D41E8A8D-0E3F-4043-BD09-32C4AF2DC6EC/data/Containers/Data/Application/72F5F0F9-2D3D-406F-A40F-54662B03A186/tmp/38B7D56B-D214-41ED-A792-99438189F640.jpg"
6. width: 3000

5. 파일 정보 얻기

 

const file = res.assets[0];

 

6. base64 포함 추가

const onPress = () => {

  launchImageLibrary({ includeBase64: true }, res => {

    console.log('launchImageLibrary : ', res);

  });

}

7. 다시  출력 - base64 확인

1. base64: "/9j/4AAQSkZJRgABAQAASABIAAD/4QKERXhpZgAATU0AKgAAA
2. fileName: "74B22DAE-C239-45EF-A1A6-CBEC14AFCFF3.jpg"
3. fileSize: 2567402
4. height: 2848
5. type: "image/jpg"
6. uri: "file:///Users/leejaeman/Library/Developer/CoreSimulator/Devices/D41E8A8D-0E3F-4043-BD09-32C4AF2DC6EC/data/Containers/Data/Application/72F5F0F9-2D3D-406F-A40F-54662B03A186/tmp/74B22DAE-C239-45EF-A1A6-CBEC14AFCFF3.jpg"
7. width: 4288

8. 파일 얻기

 

const file = res.assets[0];