[React-Native] 카메라, 갤러리에서 사진 불러오기 (react-native-image-picker)

리액트 네이티브 어플을 만들면서 사진을 직접 업로드 하는 기능을 구현하기 위해 'react-native-image-picker' 패키지를 사용하였다.

 

https://github.com/react-native-image-picker/react-native-image-picker

GitHub - react-native-image-picker/react-native-image-picker: A React Native module that allows you to use native UI to select m

 

 

 

설치

# 프로젝트 폴더에서
npm install react-native-image-picker

cd ios
pod install

 

 

라이브러리 메소드 임포트

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

 

 

카메라로 찍은 사진 불러오기

const [addPhoto, setAddPhoto] = useState('');  # 이미지 경로 state

...

reuturn(

...

                <TouchableOpacity
                    style={styles.button}
                    onPress={()=>{
                        // ios 시뮬레이터에서 동작X 핸드폰으로 확인해야함
                        launchCamera({}, response=>{
                            setAddPhoto(response.assets[0].uri);
                        })
                    }}
                >
                
                
...

);

react-native-image-picker의 launchCamera() 메서드를 사용하여 카메라로 촬영한 이미지를 업로드 할 수 있다.

 

 

촬영 버튼을 클릭하면 launchCamera가 호출되고, 사진을 찍으면 response 객체가 반환되는데 response 객체는 4가지 키값을 갖고있다. 이 중에서 assets에 접근하면 찍은 사진의 경로값을 갖고올 수 있다. assets 객체는 리스트로 둘러싸인 json 형식이다.

출처 : react-native-image-picker 깃허브 페이지

 

 

response.assets의 [0]번 인덱스로 접근해준 뒤 uri키값에 접근해주면 촬영한 이미지의 경로값을 갖고올 수 있다.

 

 

 

응답으로 받아온 사진 경로값을 추가할 사진의 state값에 넣어주면 된다.

setAddPhoto(response.assets[0].uri);

 

 

 

 

 

 

 

 

 

 

앨범에서 사진 불러오기

const [addPhoto, setAddPhoto] = useState('');  # 이미지 경로 state

...

reuturn(

...

                    <TouchableOpacity
                        style={styles.button}
                        onPress={()=>{
                            launchImageLibrary({}, response=>{
                                setAddPhoto(response.assets[0].uri);
                            })
                        }}
                    >
                
                
...

);

launchCamera()와 동일한 방법으로 launchImageLibrary() 메서드를 사용하면 앨범에서 이미지를 불러올 수 있다.

 

앨범에서 선택

 

 

 

 

※ 카메라로 촬영한 사진 업로드는 ios 시뮬레이터 상에서는 지원하지 않기 때문에 나중에 휴대폰으로 빌드한 뒤에 확인이 가능할 것 같다.