Как использовать React-Native-Image-Picker?
Как выбрать медиа из галереи или камеры?
Выбор изображений из галереи или камеры — одна из самых популярных и основных задач при разработке приложения с помощью React Native. Как мы можем это сделать?
Сегодня я вернулся, чтобы поговорить о том, как мы можем легко выбирать изображения из библиотеки вашего устройства или использовать камеру для съемки фотографий. Позвольте мне познакомить вас с React Native Image Picker.
В этой статье я покажу React Native Image Picker, разработав приложение с загрузкой изображений. Приложение позволит нам выбирать и отображать фотографии.
Настройка проекта
Прежде чем мы начнем, мне нужно создать новый проект React Native со следующими строками кода:
npx react-native init react_native_image_avatar_pickercd react_native_image_avatar_pickernpm run iosОтлично, мы успешно создали наше приложение React Native.
Теперь я собираюсь использовать React Native Image Pickerбиблиотеку для реализации компонента выбора изображений. Это модуль React Native, который позволяет выбирать фото/видео из библиотеки устройства или камеры. Давайте установим его с помощью следующих команд:
yarn add react-native-image-pickercd 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 ImagePickerAvatarconst 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 .
Спасибо за прочтение, надеюсь, эта статья была вам полезна. Приятного кодирования!