갤러리 또는 카메라에서 이미지를 선택하는 것은 React native로 앱을 개발하는 가장 인기 있고 기본적인 작업 중 하나입니다. 어떻게 할 수 있습니까?

오늘은 장치 라이브러리에서 이미지를 쉽게 선택하거나 카메라를 사용하여 사진을 캡처하는 방법에 대해 다시 이야기하겠습니다. 에 대해 소개해드리겠습니다 React Native Image Picker.

이 기사에서는 이미지를 업로드하는 앱을 개발하여 React Native Image Picker를 보여 드리겠습니다. 앱을 사용하면 사진을 선택하고 표시할 수 있습니다.

프로젝트 설정

시작하기 전에 다음 코드 줄을 사용하여 새 React Native 프로젝트를 만들어야 합니다.

react-native init react_native_image_avatar_picker
cd react_native_image_avatar_picker
npm run ios

이제 React Native Image Picker라이브러리를 사용 하여 이미지 선택기 구성 요소를 구현 하겠습니다 . 장치 라이브러리 또는 카메라에서 사진/비디오를 선택할 수 있는 React Native 모듈입니다. 다음 명령어로 설치해봅시다.

yarn add react-native-image-picker
cd ios && pod install && cd ..

<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
<key>NSCameraUsageDescription</key>
<string>The camera is accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>
<string>The microphone is accessed for the first time</string>

그런 다음 앱을 실행하고 모든 것이 정상이면 코딩할 준비가 된 것입니다!

기본 앱 생성 화면

기본 아이디어는 사용자가 장치 라이브러리에서 새 사진을 업로드하거나 카메라를 통해 사진을 캡처할 수 있도록 하는 이미지 선택기 구성 요소를 만드는 것입니다.

우선 기본 앱 화면을 새로운 녹색 헤더와 배경으로 업데이트합니다. ImagePickerHeader구성 요소를 생성해 보겠습니다 .

다음으로 ImagePickerAvatar이미지를 업로드할 수 있는 메인 컴포넌트 를 생성하겠습니다 .

결과는 다음과 같습니다.

장치에서 사진 선택

이 튜토리얼에서는 카메라를 통해 사진을 선택하거나 캡처하는 두 가지 기능을 구현합니다. React Native Modal패키지를 사용하여 사용자 지정 가능한 애니메이션 모달을 사용 하여 사용자에게 두 가지 옵션을 보여줍니다. 이를 위해 다음을 설치해야 합니다.

yarn add react-native-modal

마지막으로 두 가지 기능을 구현해야 합니다.

• onImageLibraryPress — 라이브러리에서 이미지 선택
• onCameraPress — 카메라를 사용하여 사진 찍기

이미지 선택기 앱을 데모해 봅시다.

모든 코드를 확인하려면 Github 링크를 참조하세요 .

읽어주셔서 감사합니다. 이 글이 유용하셨기를 바랍니다. 즐거운 코딩!

자원