Я использую реагирующую версию verion> 0.6. Я запускаю свое приложение на своем мобильном телефоне с nodejs, и у меня стабильное соединение inte rnet. Я создаю страницу регистрации, на которой я хочу загрузить фотографию и подключить ее. к базе данных firestore
Мое приложение. js Код:
import React from 'react';
import {View,Text,StyleSheet,TextInput,TouchableOpacity,Image,ImageBackground,StatusBar,SafeAreaView} from "react-native";
import * as firebase from 'firebase';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import ImagePicker from 'react-native-image-crop-picker'
import Icons from "react-native-vector-icons/MaterialIcons"
import FireScreen from './FireScreen';
var firebaseConfig = {};
require("firebase/firestore")
export default class RegisterScreen extends React.Component {
static navigationOptions = {
headerShown:false,
headerColor:"#161F3D"
};
state={
name:"",
email:"",
password:"",
errorMessage: null,
image:null,
uri:""
};
handleSignUp = () => {
firebase.auth().createUserWithEmailAndPassword(this.state.email,this.state.password)
.then(userCredentials => {
return userCredentials.user.updateProfile({
displayName:this.state.name
});
})
.catch(error => this.setState({errorMessage : error.message}));
};
handlePost=() =>{
FireScreen.shared.addPost({localUri: this.state.image}).then(ref =>{
this.setState({image:null})
this.props.navigation.goBack()
})
.catch(error => {alert(error);})
}
render() {
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="light-content" backgroundColor="#161F3D" animated={true}></StatusBar>
<ImageBackground source={require('../assets/test.jpg')} style={{height:"100%",width:"100%"}}>
<KeyboardAwareScrollView>
<TouchableOpacity style={styles.avatar} onPress={() => {
ImagePicker.openPicker({width: 500,height: 500,cropping: true,sortOrder: 'none',compressImageMaxWidth: 1000,compressImageMaxHeight: 1000, compressImageQuality: 1,compressVideoPreset: 'MediumQuality',includeExif: true,cropperCircleOverlay:true}).then(image => {
this.setState({ image: {uri: image.path, width: image.width, height: image.height, mime: image.mime},uri:image.path});
}).catch(error => this.setState({errorMessage:error.message}))
}
}>
<Image style={styles.avatarPhoto} source={{isStatic:true,uri:this.state.uri}}/>
<Icons name="add" size={40} color="#000" style={{alignSelf:"center",marginTop:-85}} />
</TouchableOpacity>
<Image source={require("../assets/logo.png")} style={{height:140,width:200,marginLeft:200,marginTop:-135}}></Image>
<View style={styles.errorMessage}>
{
this.state.errorMessage && <Text style={styles.error}>{this.state.errorMessage}</Text>}
</View>
<View style={styles.form}>
<View style={{marginTop:32}}>
<TextInput style={styles.input}
placeholder="Name"
autoCapitalize="none"
underlineColorAndroid="transparent"
onChangeText={name => this.setState({ name })}
value={this.state.name}>
</TextInput>
</View>
<View style={{marginTop:32}}>
<TextInput style={styles.input}
placeholder="Email ID"
autoCapitalize="none"
onChangeText={email => this.setState({ email })}
value={this.state.email}>
</TextInput>
</View>
<View style={{marginTop:32}}>
<TextInput style={styles.input}
placeholder="Password"
secureTextEntry
autoCapitalize="none"
maxLength={20}
onChangeText={password => this.setState({ password })}
value={this.state.password}
>
</TextInput>
</View>
</View>
<TouchableOpacity style={styles.button} onPress={this.handleSignUp}>
<Text style={{color:"#FFF",fontWeight:"500"}}>Sign Up</Text>
</TouchableOpacity>
<TouchableOpacity style={{alignSelf:"center",marginTop:32}}
onPress={() =>
this.handlePost()}
//this.props.navigation.navigate("Login")}
>
<Text
style={{color:"#414959",fontSize:13,marginTop:30,fontWeight:"800",height:23,borderRadius:20,backgroundColor:"#FFF"}}>
Already Have An Account ?
<Text
style={{fontWeight:"800",color:"#000",textDecorationStyle:"solid"}}> Sign In</Text></Text>
</TouchableOpacity>
</KeyboardAwareScrollView>
</ImageBackground>
</SafeAreaView>
);
}
}
const styles=StyleSheet.create({
container: {
flex:1,
backgroundColor:"#FFF"
},
greeting:{
marginTop:70,
fontSize:18,
fontWeight:"500",
textAlign:"center",
textDecorationStyle:"solid",
color:"#161F3D",
borderStyle:"solid",
},
errorMessage:{
height:72,
alignItems:"center",
justifyContent:"center",
marginHorizontal:30
},
error:{
color:"#E9446A",
fontSize:13,
fontWeight:"600",
textAlign:"center"
},
form:{
marginTop:-50,
marginBottom:50,
marginHorizontal:40,
},
input:{
alignItems:"center",
marginTop:10,
height:40,
fontSize:15,
borderColor:"#BAB7C3",
borderWidth: StyleSheet.hairlineWidth,
borderRadius:13,
paddingHorizontal:16,
color:"#514E5A",
fontWeight:"600"
},
button:{
marginHorizontal:100,
backgroundColor:"#161F3D",
borderRadius:4,
height:52,
alignItems:"center",
justifyContent:"center",
borderTopEndRadius:10,
borderBottomEndRadius:10,
borderTopStartRadius:10,
borderBottomStartRadius:10,
},
avatar:{
width:130,
height:130,
borderRadius:90,
backgroundColor:"#E1E2E6",
alignContent:"center",
marginLeft:60,
marginTop:100,
} ,
avatarPhoto:{
width:130,
height:130,
borderRadius:90,
backgroundColor:"#E1E2E6",
alignContent:"center",
marginLeft:0,
marginTop:0,
} });
Мой код FireBase:
Я успешно подключил свое приложение с помощью firebase… нет подключения проблемы с моим приложением и firebase, и я создал облачную базу данных firestore из базы данных firebase
import firebase from "firebase"
var firebaseConfig = {
};
class FireScreen {
constructor(){
firebase.initializeApp(firebaseConfig);
}
addPost = async ({localUri })=>{
const remoteUri = await this.uploadPhotoAsync(localUri);
return new Promise((res,rej)=> {
this.firestore.collection("profilePics").add({
uid:this.uid,
image:remoteUri
})
.then(ref =>{
res(ref);
})
.catch(error =>{
rej(error);
})
})
}
uploadPhotoAsync = async uri => {
const path = 'photos/${this.uid}}.jpg'
return new Promise(async (res,rej)=>{
const response=await fetch(uri)
const file =await response.blob()
let upload = firebase.storage().ref(path).put(file)
upload.on("state_changed", snapshot => {},err=>{
rej(err)
},
async() =>{
const url = await upload.snapshot.ref.getDownloadURL()
res(url);
}
);
});
};
get firestore() {
return firebase.firestore();
}
get uid(){
return (firebase.auth().currentUser || {}).uid
}
}
FireScreen.shared = new FireScreen();
export default FireScreen;
Я получаю такую ошибку, пожалуйста, помогите мне с этим
Possible Unhandled Promise Rejection (id: 2):
TypeError: Network request failed
onerror@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:28006:31
@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:34134:31
setReadyState@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:33218:33
__didCompleteResponse@http://localhost:8081/index.bundle? platform=android&dev=true&minify=false:33045:29
emit@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:3416:42
__callFunction@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2744:49
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2466:31
__guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2698:15
callFunctionReturnFlushedQueue@http://localhost:8081/index.bundle? platform=android&dev=true&minify=false:2465:21
callFunctionReturnFlushedQueue@[native code]