Как использовать React-Native-Image-Picker?

Как выбрать медиа из галереи или камеры?

Выбор изображений из галереи или камеры — одна из самых популярных и основных задач при разработке приложения с помощью React Native. Как мы можем это сделать?

Сегодня я вернулся, чтобы поговорить о том, как мы можем легко выбирать изображения из библиотеки вашего устройства или использовать камеру для съемки фотографий. Позвольте мне познакомить вас с React Native Image Picker.

В этой статье я покажу React Native Image Picker, разработав приложение с загрузкой изображений. Приложение позволит нам выбирать и отображать фотографии.

Настройка проекта

Прежде чем мы начнем, мне нужно создать новый проект React Native со следующими строками кода:

npx react-native init react_native_image_avatar_picker
cd react_native_image_avatar_picker
npm run ios

Отлично, мы успешно создали наше приложение React Native.

Теперь я собираюсь использовать React Native Image Pickerбиблиотеку для реализации компонента выбора изображений. Это модуль React Native, который позволяет выбирать фото/видео из библиотеки устройства или камеры. Давайте установим его с помощью следующих команд:

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

Далее нам нужно добавить разрешения iOS для нашего приложения Info.plist:

<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>

Нам не требуются разрешения для Android ( saveToPhotosтребуется проверка разрешений ).

После этого, если мы запустим приложение и все будет в порядке, мы готовы к написанию кода!

Создайте базовый экран приложения

Основная идея состоит в том, чтобы создать компонент выбора изображений, который позволит пользователю загрузить новую фотографию из библиотеки устройства или сделать снимок с помощью камеры.

Прежде всего, мы обновим экран базового приложения новым зеленым заголовком и фоном. Создадим ImagePickerHeaderкомпонент:

import { SafeAreaView, StyleSheet, Text, View } from "react-native";

export function ImagePickerHeader() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <View style={styles.topBar}>
          <Text style={styles.topBarTitleText}>Avatar Picker</Text>
        </View>
      </SafeAreaView>
    );
  }

  const styles = StyleSheet.create({
    safeArea: {
        backgroundColor: '#62d1bc',
      },
      topBar: {
        height: 50,
        backgroundColor: '#62d1bc',
        alignItems: 'center',
        justifyContent: 'center',
      },
      topBarTitleText: {
        color: '#ffffff',
        fontSize: 20,
      },

  })

Далее я собираюсь создать основной ImagePickerAvatarкомпонент, который позволит вам загружать изображения.

import { Image, ImageBackground, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React from 'react'
const background=require('../assets/images/whatsapp-background.jpg')
const avatar=require('../assets/images/avatar.jpg')
const addButton=require('../assets/images/add-button.png')

interface ImagePickerAvatarInterface{
    uri:any,
    onPress:() => void
}
const ImagePickerAvatar = ({uri, onPress}:ImagePickerAvatarInterface) => {
  return (
    <ImageBackground
    style={styles.imageBackground}
    source={background}>
    <View style={styles.avatar}>
      <ImageBackground
        style={styles.avatarImage}
        source={uri ? { uri } : avatar}
      />
      <TouchableOpacity style={styles.addButton} onPress={onPress}>
        <Image style={styles.addButtonIcon} source={addButton} />
      </TouchableOpacity>
      <Text style={styles.usernameText}>Omurbek Mamytbekov</Text>
    </View>
  </ImageBackground>
  )
}

export default ImagePickerAvatar

const styles = StyleSheet.create({
    imageBackground: {
      flex: 1,
    },
    avatar: {
      alignItems: 'center',
      marginTop: '40%',
    },
    avatarImage: {
      height: 260,
      width: 260,
      overflow: 'hidden',
      borderColor: '#ffffff',
      borderWidth: 4,
      borderRadius: 260 / 2,
    },
    addButton: {
      height: 54,
      width: 54,
      backgroundColor: '#f2f2fC',
      borderRadius: 50,
      position: 'absolute',
      right: 104,
      bottom: 40,
    },
    addButtonIcon: {
      height: 54,
      width: 54,
    },
    usernameText: {
      fontSize: 24,
      fontWeight: '700',
      color: '#ffffff',
      marginTop: 12,
    },
  });

Вот результат:

Экран выбора главного изображения аватара

Выберите фотографию с устройства

В этом уроке мы собираемся реализовать две возможности выбора или захвата фотографии с помощью камеры. Я буду использовать настраиваемое анимированное модальное окно, используя React Native Modalпакет, чтобы показать пользователю два варианта. Для этого нам необходимо установить его:

yarn add react-native-modal

Далее я создам ImagePickerModalкомпонент:

import React from 'react';
import { SafeAreaView, Text, Image, Pressable, StyleSheet } from 'react-native';
import Modal from 'react-native-modal';


interface  ImagePickerModalProps{
    isVisible: boolean;
    onClose:(() => void);
    onImageLibraryPress:(() => void);
    onCameraPress:(() => void);


}
export function ImagePickerModal({
  isVisible,
  onClose,
  onImageLibraryPress,
  onCameraPress,
}: ImagePickerModalProps) {
  return (
    <Modal
      isVisible={isVisible}
      onBackButtonPress={onClose}
      onBackdropPress={onClose}
      style={styles.modal}>
      <SafeAreaView style={styles.buttons}>
        <Pressable style={styles.button} onPress={onImageLibraryPress}>
          <Image style={styles.buttonIcon} source={require('../assets/images/image.jpg')} />
          <Text style={styles.buttonText}>Library</Text>
        </Pressable>
        <Pressable style={styles.button} onPress={onCameraPress}>
          <Image style={styles.buttonIcon} source={require('../assets/images/camera.png')} />
          <Text style={styles.buttonText}>Camera</Text>
        </Pressable>
      </SafeAreaView>
    </Modal>
  );
}

const styles = StyleSheet.create({
  modal: {
    justifyContent: 'flex-end',
    margin: 0,
  },
  buttonIcon: {
    width: 30,
    height: 30,
    margin: 10,
  },
  buttons: {
    backgroundColor: 'white',
    flexDirection: 'row',
    borderTopRightRadius: 30,
    borderTopLeftRadius: 30,
  },
  button: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    fontSize: 14,
    fontWeight: '600',
  },
});

И последнее, но не менее важное: нам нужно реализовать две функции:

• onImageLibraryPress— выбрать изображение из библиотеки
• onCameraPress— сфотографироваться с помощью камеры

Теперь давайте обновим наш UserScreen.jsфайл:

import { StyleSheet, Text, View } from 'react-native'
import React, { useCallback, useState } from 'react'
import { ImagePickerHeader } from '../components/ImagePickerHeader'
import ImagePickerAvatar from '../components/ImagePickerAvatar'
import { ImagePickerModal } from '../components/ImagePickerModal'
import * as ImagePicker from 'react-native-image-picker'
const UserScreen = () => {
    const [pickerResponse, setPickerResponse] = useState<any>(null);
    const [visible, setVisible] = useState(false);
    const onImageLibraryPress = useCallback(() => {
        const options:any = {
          selectionLimit: 1,
          mediaType: 'photo',
          includeBase64: false,
        };
        ImagePicker.launchImageLibrary(options, setPickerResponse);
      }, []);

      const onCameraPress = useCallback(() => {
        const options = {
          saveToPhotos: true,
          mediaType: 'photo',
          includeBase64: false,
        };
        ImagePicker.launchCamera(options, setPickerResponse);
      }, []);
      const uri = pickerResponse?.assets && pickerResponse.assets[0].uri;
  return (
    <>
        <ImagePickerHeader/>
        <ImagePickerAvatar uri={uri} onPress={() => setVisible(true)}/>
        <ImagePickerModal    isVisible={visible}
        onCameraPress={onCameraPress}
         onClose={() => setVisible(false)}
         onImageLibraryPress={onImageLibraryPress}/>
     
    </>
  )
}

export default UserScreen

Давайте продемонстрируем наше приложение для выбора изображений

Если вы хотите проверить весь код, вот ссылка на Github .

Спасибо за прочтение, надеюсь, эта статья была вам полезна. Приятного кодирования!

Автор статьи на английском языке : https://medium.com/@gapur-kassym

Переводил:https://medium.com/@omurbekmamytbekov545