Escolher imagens da galeria ou câmera é uma das tarefas mais populares e básicas para desenvolver um aplicativo com React nativo. Como podemos fazer isso?

Hoje estou de volta para falar sobre como podemos facilmente selecionar imagens da biblioteca do seu dispositivo ou usar a câmera para capturar fotos. Deixe-me apresentá-lo React Native Image Picker.

Neste artigo, mostrarei o React Native Image Picker desenvolvendo um aplicativo com upload de imagens. O aplicativo nos permitirá escolher e exibir fotos.

Configurando o Projeto

Antes de começarmos, preciso criar um novo projeto React Native com as seguintes linhas de código:

react-native init react_native_image_avatar_picker
cd react_native_image_avatar_picker
npm run ios

Agora, vou usar a React Native Image Pickerbiblioteca para implementar o componente seletor de imagens. É um módulo React Native que permite selecionar uma foto / vídeo da biblioteca ou câmera do dispositivo. Vamos instalá-lo com os seguintes comandos:

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>

Depois disso, se executarmos o aplicativo e tudo estiver bem, estamos prontos para codificar!

Criar uma tela de aplicativo base

A ideia básica é construir um componente seletor de imagens que permitirá ao usuário fazer upload de uma nova foto da biblioteca do dispositivo ou capturar a foto por meio da câmera.

Em primeiro lugar, atualizaremos uma tela do aplicativo base com um novo cabeçalho e plano de fundo verdes. Vamos criar um ImagePickerHeadercomponente:

A seguir, vou criar um ImagePickerAvatarcomponente principal que permite fazer upload de imagens.

Aqui está o resultado:

Escolha uma foto do dispositivo

Neste tutorial, vamos implementar duas habilidades para selecionar ou capturar uma foto via câmera. Usarei um modal animado personalizável usando o React Native Modalpacote para mostrar ao usuário duas opções. Para isso, precisamos instalá-lo:

yarn add react-native-modal

Por último, mas não menos importante, precisamos implementar duas funções:

• onImageLibraryPress - selecionar imagem da biblioteca
• onCameraPress - tire uma foto usando a câmera

Vamos demonstrar nosso aplicativo de seleção de imagens

Se você quiser verificar todo o código, aqui está o link para o Github .

Obrigado pela leitura, espero que você tenha achado este artigo útil. Boa codificação!

Recursos