Как загрузить изображение, снятое React-Native-camera, в хранилище Firebase? - PullRequest
Новая
       39

Как загрузить изображение, снятое React-Native-camera, в хранилище Firebase?

0 голосов
/ 09 июля 2019

Я хочу выгрузить изображение, снятое с помощью реагирующей нативной камеры, в https://github.com/invertase/react-native-firebase хранилище на RN

Я не могу загрузить изображение.

Я попробовал библиотеку выбора изображенийи работал. 

import React, { Component } from 'react';
import {Image, View, Text, StyleSheet, Dimensions,TouchableOpacity} from 'react-native'
import { RNCamera } from 'react-native-camera';
import {strings} from '../Lang/Strings';
import { Actions } from 'react-native-router-flux';
const { width, height } = Dimensions.get('window');


export default class ScanPage extends Component {
constructor(props) {
        super(props);
        this.state = {

  takePicture = async () => {
    if (this.camera) {

      const options = { quality: 0.5, base64: true }
      const data = await this.camera.takePictureAsync(options)


      Actions.ProfilePage({imagePath:data.uri,
        selectedIndex:this.state.selectedIndex,
        shapes:this.state.shapes });
        this.uploadPhoto(data);

};

  };

  render() {
    const {selectedIndex, images, shapes} = this.state;
      return(
          <View style={styles.container}>
          <RNCamera
            ref={ref => {
              this.camera = ref;
            }}
            style={styles.preview}
            type={RNCamera.Constants.Type.front}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}  />
          <View style={{flex:1,justifyContent:'center' ,alignItems:'center'}}>
          <View style={{marginTop:120}}>
      <Image   source={images[selectedIndex]} >
      </Image>
      </View>
      </View>
          <View style={styles.buttonSection}>
          <TouchableOpacity onPress={this._TogglePrev}>
            <View style={styles.buttons}>
            <Text style={{textAlign:'center',color: 'white'}}>
            {strings.back} 
            </Text>

            </View>
            </TouchableOpacity>

            <View style={{alignItems:'center', justifyContent:'center',
         height:height*0.04}}> 

            <Text style ={{color:'white',textAlign:'center'}}>{shapes[selectedIndex]} </Text> 

            </View>
            <TouchableOpacity onPress={this._ToggleNext}>
            <View style={styles.buttons}>
            <Text style={{textAlign:'center', color: 'white'}}>
            {strings.next} 
            </Text>

            </View>
            </TouchableOpacity>
          </View> 

          <View style={{alignItems:'center', justifyContent:'center',
          backgroundColor:'#D9E6FF',height:height*0.001,width:width*1}}> 

            <Text style ={{color:'white',textAlign:'center'}}> </Text> 

            </View>
          <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center'}}>

            <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}
            >
            <View style={{ 
      backgroundColor: 'white',
      borderRadius: (height*0.16)/2,
      padding: 15,
      alignSelf: 'center',
      margin: 25,
     height:height*0.085,
     width:width*0.16,
      justifyContent:'center',
      alignItems:'center',
      borderWidth:0.9,
      borderColor:'#D9E6FF',}}></View>
            </TouchableOpacity>
          </View>

        </View>
      );
    }

    takePicture = async function() {
      if (this.camera) {

        const options = { quality: 0.5, base64: true };
        const data = await this.camera.takePictureAsync(options);

        Actions.ProfilePage({imagePath:data.uri,
          selectedIndex:this.state.selectedIndex,
          shapes:this.state.shapes 
    });
      }
    };
  }

Я не загружал firebase, версии реагируют: 16.4.1, реактивная-собственная: 0.56.0, реактивная-собственная-камера: 1.12.0, реактивная-собственная-пожарная база: 5.2.3 response-native-router-flux: 4.0.1

1 Ответ

0 голосов
/ 10 июля 2019 
_publish = async () => {

      const imageuri= this.state.imagePath;

      //this is where + how you want your image to be stored into
      const refFile= firebase.storage().ref().child('profile_pic'); 

      refFile.putFile(imageuri)

          .catch(error => {
            console.log(error);
            // Alert.alert('Hey', error);
          });


  }

надеюсь, это поможет!

...