Como construir um seletor de imagens usando o react-native-image-crop-picker

Na minha experiência de trabalho com o React Native, uma das tarefas que me peguei fazendo com mais frequência é construir a funcionalidade de upload de imagens de dispositivos de usuários. Isso pode ser desafiador se você nunca fez isso antes.

Neste tutorial, vamos demonstrar como usar React Native Image Crop Picker para permitir que seus usuários selecionem imagens de seus dispositivos ou usem a câmera do dispositivo para capturar e enviar fotos ao vivo para seu aplicativo.

Para mostrar como o react-native-image-crop-picker funciona, criaremos um componente selecionador de imagem reutilizável que controla a permissão para selecionar uma imagem da biblioteca de mídia ou obter uma nova imagem usando a câmera.

Ao final do tutorial, você deve usar o componente seletor de imagem da seguinte maneira:

  import * as React from'react';
import {View} from'react-native';
importar {ImageOrVideo} de'react-native-image-crop-picker';
importar {Avatar} de'./Avatar'; export const Profile=()=> { const onAvatarChange=(imagem: ImageOrVideo)=> { console.log (imagem); //carregue a imagem para o servidor aqui }; Retorna (  );
};
 

Aqui está uma demonstração simples do resultado final:

Escolha do seletor de imagens React Native correto

Existem duas bibliotecas populares que você pode usar para implementar o componente seletor de imagens: react-native-image-picker e react-native-image-crop-picker . React Native Image Picker é outro módulo React Native para selecionar mídia da biblioteca de dispositivos ou câmera. Então, por que usar o seletor de corte de imagem nativa React?

A vantagem de usar o react-native-image-crop-picker é que, ao contrário do react-native-image-picker , ele permite cortar e compactar imagens. Isso é especialmente crítico ao construir aplicativos iOS, porque o upload de arquivos grandes pode apresentar problemas de desempenho. Compactar e cortar imagens também é útil para usuários com baixa velocidade de Internet.

Instalando react-native-image-crop-picker

Vamos criar um novo projeto React Native usando um modelo TypeScript:

  npx react-native init ImagePickerDemo--template react-native-template-typescript
 

Em seguida, instale o react-native-image-crop-picker :

  yarn add react-native-image-crop-picker
 

Como o react-native-image-crop-picker vem com algumas dependências nativas, precisamos instalar o pod e reconstruir o aplicativo:

  cd ios && pod install && cd..
 

Para usar o react-native-image-crop-picker , você deve adicionar a seguinte configuração ao info.plist :

  NSPhotoLibraryUsageDescription 
 $ (PRODUCT_NAME) gostaria de enviar fotos de sua galeria de fotos 
 NSCameraUsageDescription 
 $ (PRODUCT_NAME) requer acesso à câmera para enviar fotos ao seu perfil ou postagens 
 NSMicrophoneUsageDescription 
 $ (PRODUCT_NAME) requer acesso à gravação de áudio para gravar e enviar vídeos 
 

A configuração NSPhotoLibraryUsageDescription descreve por que você precisa acessar as fotos do usuário e por que está acessando a câmera. Se você deseja acessar apenas imagens da biblioteca do dispositivo, não precisa adicionar as chaves NSMicrophoneUsageDescription ou NSCameraUsageDescription .

Agora estamos prontos para construir e abrir o aplicativo:

  yarn ios
 

Configuração do Android

A configuração do Android para react-native-image-crop-picker é a seguinte.

Primeiro, adicione useSupportLibrary ( android/app/build.gradle ):

  android { ... defaultConfig { ... vectorDrawables.useSupportLibrary=true ... } ...
}
 

Se quiser usar o seletor de câmera em seu projeto, adicione o seguinte a app/src/main/AndroidManifest.xml :

Se quiser permitir que o usuário use a câmera frontal, você também deve adicionar o seguinte a app/src/main/AndroidManifest.xml :

É importante mencionar que você precisa atualizar para o Android SDK 26+ . Se você estiver usando React Native 0.64 , você está seguro. Se esse não for o caso, certifique-se de atualizar android/app/build.gradle :

  android { compileSdkVersion 27 buildToolsVersion"27.0.3" ... defaultConfig { ... targetSdkVersion 27 ... } ...
}
 

Criação de uma atualização de perfil de avatar

Nesta seção, construiremos uma tela simples para atualizar o avatar do usuário. A ideia é criar um componente seletor de imagens para permitir que o usuário carregue um novo avatar. O componente avatar deve estender seu prop do componente Image , e adicionaremos onChange para lidar com o upload de uma nova imagem do dispositivo do usuário.

Envolveremos nossa imagem com um componente pressionável para abrir a biblioteca de fotos quando o usuário pressionar sua foto de perfil. Abrir a biblioteca de imagens é tão fácil quanto chamar a função openPicker do react-native-image-crop-picker .

Vamos adicionar um recurso de corte que permite aos usuários cortar a imagem selecionada antes de enviar:

  import React from'react';
import {Image, ImageProps, StyleSheet, TouchableOpacity} de'react-native';
import ImagePicker, {ImageOrVideo} de'react-native-image-crop-picker'; interface AvatarProps estende ImageProps { onChange ?: (imagem: ImageOrVideo)=> void;
} export const Avatar=(props: AvatarProps)=> { const [uri, setUri]=React.useState (props.source?.uri || indefinido); const pickPicture=()=> { ImagePicker.openPicker ({ largura: 300, altura: 400, recorte: verdadeiro, }). então (imagem=> { setUri (image.path); props.onChange?. (imagem); }); }; Retorna (    );
}; estilos const=StyleSheet.create ({ avatar: { paddingTop: 20, altura: 100, largura: 100, borderRadius: 100, preenchimento: 20, },
});
 

Agora que nosso componente de avatar está pronto para ser usado, vamos criar uma tela de perfil e atualizar a foto do perfil do usuário:

  import * as React from'react';
import {StatusBar, StyleSheet, View} de'react-native';
importar {ImageOrVideo} de'react-native-image-crop-picker';
importar {Avatar} de'./Avatar';
importar {UserInfo} de'./UserInfo'; export const Profile=()=> { const onAvatarChange=(imagem: ImageOrVideo)=> { console.log (imagem); //carregue a imagem para o servidor aqui }; Retorna (         );
}; estilos const=StyleSheet.create ({ rolagem: { backgroundColor:'branco', flex: 1, }, userRow: { alignItems:'center', preenchimento: 15, marginTop: 70, }, contente: { flex: 1, backgroundColor:'# d8d8db', },
});
 

Aqui, adicionamos a propriedade onChange ao avatar. Isso nos fornecerá todas as informações do arquivo, que podemos usar facilmente para enviá-lo ao nosso servidor. Aqui está o resultado:

Tirando uma foto usando a câmera do dispositivo

Digamos que queremos dar ao usuário a capacidade de tirar uma foto de sua câmera e carregá-la. Devemos também dar ao usuário a opção de selecionar uma foto da biblioteca ou usar a câmera do dispositivo para tirar uma nova foto.

Observe que openCamera não funciona no simulador iOS. Para testá-lo, você deve executar o aplicativo em um dispositivo real.

Para usar a câmera, só precisamos chamar a função openCamera em vez de openPicker :

  import React from'react';
import { Imagem, ImageProps, Pressable, SafeAreaView, StyleSheet, Texto, TouchableOpacity,
} de'react-native';
import ImagePicker, {ImageOrVideo} de'react-native-image-crop-picker';
importar modal de'react-nativo-modal';
import {CameraIcon, ImageIcon} de'./icons'; interface AvatarProps estende ImageProps { onChange ?: (arquivo: ImageOrVideo)=> void;
} export const Avatar=(props: AvatarProps)=> { const [uri, setUri]=React.useState (props.source?.uri || indefinido); const [visible, setVisible]=React.useState (false); const close=()=> setVisible (false); const open=()=> setVisible (true); const chooseImage=()=> { ImagePicker.openPicker ({ largura: 300, altura: 400, recorte: verdadeiro, }) .então (imagem=> { setUri (image.path); props.onChange?. (imagem); }) .finalmente (fechar); }; const openCamera=()=> { ImagePicker.openCamera ({ largura: 300, altura: 400, recorte: verdadeiro, }) .então (imagem=> { setUri (image.path); props.onChange?. (imagem); }) .finalmente (fechar); }; Retorna ( <>         Biblioteca      Câmera      );
}; estilos const=StyleSheet.create ({ avatar: { paddingTop: 20, altura: 100, largura: 100, borderRadius: 100, preenchimento: 20, }, opções: { backgroundColor:'branco', flexDirection:'row', borderTopRightRadius: 30, borderTopLeftRadius: 30, }, opção: { flex: 1, justifyContent:'center', alignItems:'center', },
});
 

Aqui está uma demonstração de nosso aplicativo React Native finalizado:

Conclusão

Agora você pode copiar e colar esse componente seletor de imagem sempre que precisar criar um recurso de upload de imagem em um aplicativo React Native.

O código completo está disponível neste repositório Github se você quiser brincar com este projeto.

A postagem Como criar um seletor de imagens usando react-native-image-crop-picker apareceu primeiro no LogRocket Blog .