Загрузка изображений в Firebase Storage в React Native с помощью Expo Workflow.

Существует множество способов загрузки локальных изображений и видео в Firebase Storage в React Native, и мы рассмотрим реализацию Blob через пользовательский XMLHTTPRequest.

1. Начнем с создания проекта Firebase.

  • Зайдите в Firebase Console и нажмите на Create a Project.

  • Укажите имя приложения и продолжите.

  • После того как проект будет создан, создайте веб-приложение.

  • Укажите имя веб-приложения и нажмите на Continue to Console.

2. Создание приложения React Native в Expo

  • Создайте приложение react native в expo с помощью команды expo init ProjectName.

  • Мы будем использовать Expo-Image-Picker для выбора изображений с нашего устройства. Установим Expo-Image-Picker в наш проект yarn add expo-image-picker.

  • Добавим Firebase в проект с помощью yarn add firebase@9.6.11.

  • Теперь давайте добавим детали конфигурации для проекта firebase, который мы создали.
    Создайте файл с именем firebase.js и получите данные конфигурации проекта firebase из настроек приложения.

  • В файле firebase.js мы сохраним детали конфигурации firebase и инициализируем приложение
import firebase from 'firebase/compat/app'
import 'firebase/compat/storage'
import { initializeApp } from "firebase/app";

export const firebaseConfig = {
  apiKey: "KEY",
  authDomain: "authDomain",
  projectId: "ProjectID",
  storageBucket: "storageBucketId",
  messagingSenderId: "sendrId",
  appId: "appId"
};

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig)
}

const app = initializeApp(firebaseConfig);

export {app, firebase}
Вход в полноэкранный режим Выйти из полноэкранного режима
  • Создадим асинхронную функцию для выбора изображения с помощью expo image picker
const [image, setImage] = useState(null)
const [uploading, setUploading] = useState(false)
const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All, // We can 
             specify whether we need only Images or Videos
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,   // 0 means compress for small size, 1 means 
                       compress for maximum quality
    });

    console.log(result);

    if (!result.cancelled) {
      setImage(result.uri);
    }
  };
Вход в полноэкранный режим Выход из полноэкранного режима
  • Теперь давайте реализуем функциональность blob для отправки изображения в хранилище firebase
const uploadImage = async () => {
    const blob = await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.onload = function() {
        resolve(xhr.response);
      };
      xhr.onerror = function() {
        reject(new TypeError('Network request failed'));
      };
      xhr.responseType = 'blob';
      xhr.open('GET', image, true);
      xhr.send(null);
    })
    const ref = firebase.storage().ref().child(`Pictures/Image1`)
    const snapshot = ref.put(blob)
    snapshot.on(firebase.storage.TaskEvent.STATE_CHANGED,
      ()=>{
        setUploading(true)
      },
      (error) => {
        setUploading(false)
        console.log(error)
        blob.close()
        return 
      },
      () => {
        snapshot.snapshot.ref.getDownloadURL().then((url) => {
          setUploading(false)
          console.log("Download URL: ", url)
          setImage(url)
          blob.close()
          return url
        })
      }
      )
  }
Войти в полноэкранный режим Выход из полноэкранного режима
  • Теперь создадим простой пользовательский интерфейс с 2 кнопками и вызовем pickImage и uploadImage из onPress.
<View style={styles.container}>
      {image && <Image source={{uri: image}} style={{width: 170 , height: 200}}/>}
      <Button title='Select Image' onPress={pickImage} />
      {!uploading ? <Button title='Upload Image' onPress={uploadImage} />: <ActivityIndicator size={'small'} color='black' />}
    </View>
Вход в полноэкранный режим Выход из полноэкранного режима

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

  • Когда пользователь нажимает на кнопку Выбрать изображение, открывается библиотека изображений, и после выбора изображения, выбранное изображение будет отображено на экране.

  • Когда пользователь нажмет на кнопку Upload Image, появится индикатор активности, и изображение будет загружено в firebase Storage.

Полный код можно найти здесь.

Оцените статью
devanswers.ru
Добавить комментарий