728x90
react-native: 0.61.5
갤러리에서 사진을 가져오려면 camera 권한이 필요함.
1) PHOTO_LIBRARY 권한 요청
https://coding-dahee.tistory.com/145
권한 요청 라이브러리 사용은 위 포스팅을 참고!
2) react-native-cameraroll 라이브러리 사용해서 사진을 가져와 보자.
https://github.com/react-native-community/react-native-cameraroll
rn community 문서는 굉장히 가독성이 좋다!!
- 설치
npm install @react-native-community/cameraroll --save
cd ios && pod install
설치는 이게 끝이다!!!!!
3) Usage
사진을 가져올 수 있는 getPhotos() API를 이용
import CameraRoll from "@react-native-community/cameraroll";
const getPhotos = async () => {
try {
const {edges} = await CameraRoll.getPhotos({
first: 10,
});
console.log('📸', edges);
} catch (error) {
console.log('getPhoto', error);
}
};
first라는 옵션은 필수! 최신순으로 몇개의 사진을 가져올건지 정해야 한다.
- 콘솔은 이렇게 찍힌다.
아이폰 시뮬레이터 갤러리에 있는 기본 이미지들을 불러온다.
uri를 사용하고 싶으면
const {edges} = await CameraRoll.getPhotos({
first: 10,
});
const uri = edges[0].node.image.uri
이렇게 얻으면 된다!
====================
카메라 띄우기, 사진 찍기, 사진 저장하는 법도 궁금하시다면 아래 포스팅을 참고해주세요!
오늘 사용한 cameraroll을 이용하는 단계도 있습니다.
https://coding-dahee.tistory.com/147
Buy Me A Coffee!
https://www.buymeacoffee.com/daheeahn
'Develop > React Native' 카테고리의 다른 글
[React Native] 휴대폰/시뮬레이터 화면의 총 가로/세로 길이를 알아내는 법! => Dimensions (0) | 2020.03.19 |
---|---|
[React Native] react-native-camera 카메라 띄우기, 사진 찍기, 사진 저장하는 법 (react-native-community) (12) | 2020.03.19 |
[React Native] react-native-permission 사용법 (0) | 2020.03.19 |
[React Native] NFC 태그 시 앱/어플 실행시키는 방법 (Android 위주) (10) | 2020.03.18 |
[React Native] run-android 되지 않을 때 / Could not compile settings file /JDK 문제 (2) | 2020.03.17 |