Большинство руководств, которые можно найти на YouTube или других платформах, в основном помогают разработчикам загружать изображения в хранилище Firebase с помощью React Native Expo. Однако, если вы используете React Native Cli (без Expo), эта статья для вас.

  1. Настройте свой проект React Native с помощью React Native cli

Запустите команду:

npx [email protected].X init ImageUpload — версия X.XX.X

Если вы не укажете версию, React Native выберет для вас последнюю версию. Используйте для этого проекта версию 0.68.2.

Изменить каталог на ImageUpload

Открыть проект в Visual Studio Code

Создайте папку components, а затем внутри нее создайте еще одну папку с именем firebase.

Внутри папки firebase создайте файл config.js с данными вашего приложения.

2.Создайте проект в консоли Firebase, перейдя по этой ссылке: https://console.firebase.google.com/

Чтобы зарегистрировать приложение в Firebase, необходимо проверить имя пакета приложения: package com.imageupload;

Добавьте веб-приложение в свой проект. Под псевдонимом приложения вставьте com.imageupload.

Теперь установите Firebase с помощью команды:

npm установить firebase

Затем инициализируйте Firebase и начните использовать SDK для продуктов, которые вы хотите использовать.

Также установите firebase storage и react-native-image-picker:

npm i @react-native-firebase/storage, затем импортируйте getStorage,getStream и refиз storage.

Перейдите в хранилище в консоли Firebase и создайте папку с именем images. Я выбрал вариант «запустить в тестовом режиме».

Измените правила, чтобы избежать проблем с доступностью, добавив в правила следующую строку: разрешить чтение, запись: если верно;

Ваш config.js должен выглядеть так:

Создайте страницу ImageUpload и импортируйте launchImageLibrary из react-native-image-picker.

Также импортируйте uploadBytes, getDownloadURLизfirebase/storage и storageRef, хранилищеиз config.js.

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

Создайте асинхронную функцию с именем imagePicker с методом launchImageLibrary с объектом параметра с переданными ему свойствами mediaType и quality. Когда метод launchImageLibrary возвращает результат , метод then вызывается для объекта результата с помощью функции обратного вызова. Функция обратного вызова проверяет, отменил ли пользователь процесс выбора изображения или нет, используя свойство didCancel объекта ответа. Если пользователь не отменял, первая фотография в массиве ресурсов объекта ответа извлекается, и ее URI устанавливается как новое изображение с помощью функции setImage. catch метод регистрирует ошибку в консоли.

Кроме того, для загрузки изображения в хранилище Firebase вызывается функция handleUpload. Это асинхронная функция, которая извлекает данные изображения из предоставленного URI изображения и преобразует их в >blob, а затем загружает его в сегмент хранилища Firebase с помощью функций uploadBytes и getDownloadURL из Firebase SDK. Если загрузка прошла успешно, URL-адрес загрузки загруженного изображения записывается в консоль. В случае ошибки на консоль выводится сообщение об ошибке.

ImageUpload должен выглядеть, как показано ниже.

Если вы нажмете ImageUpload, он выберет изображение, загрузит его в Firebase и запишет в консоль сообщение «изображение успешно загружено». Создается ссылка для скачивания изображения, которую вы можете отправить в API, если вы нужно.

Вот исходный код: https://github.com/Wilson-Ochieng/ImageUpload

Пожалуйста, следуйте за мной на github: https://github.com/Wilson-Ochieng

Удачи с вашими приложениями, если вы в основном работаете с изображениями!