尚未创建React Native/Firebase Error应用 [英] React Native/Firebase Error app hasn't been created
问题描述
问题
我正在创建一个简单的应用程序，人们可以在其中使用 react native 和 firebase 创建帖子，当我添加所有代码以将变量"postInput"上传到在服务器上，我收到一个错误(包括图片)，说该应用尚未创建，它告诉我调用 App.initializeApp()，但是我确实有该代码在我的应用中.我很乐意为您解决这个问题提供帮助.
I am creating a simple app where people can create posts using react native and firebase, and when I added all of the code to upload a variable "postInput" to a server, I got an error (picture included) saying that the app hasn't been created, and it tells me to call App.initializeApp() but I do have that code in my app. I would love some help solving this problem.
代码
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button } from 'react-native';
import { Font } from 'expo';
import * as firebase from 'firebase';
var fontLoaded = false;
var ref = firebase.database().ref('posts');
var newPostRef = ref.child("posts");
var newPostRef = postsRef.push();
const firebaseConfig = {
apiKey: "AIzaSyD025SWUH7zLELn4vWtf9nGq1-0h33Y958",
authDomain: "candidtwo.firebaseapp.com",
databaseURL: "https://candidtwo.firebaseio.com",
storageBucket: "candidtwo.appspot.com",
};
const firebaseApp = App.initializeApp(firebaseConfig); //tells me to call this, I do and still get error
export default class App extends React.Component {
state = {
fontLoaded: false,
};
componentDidMount() {
Expo.Font.loadAsync({
'JosefinSans-Regular.ttf': require('./JosefinSans-Regular.ttf'),
});
}
constructor(props) {
super(props);
this.state = { postInput: ""}
}
render() {
return (
<View style={styles.container}>
<View style={styles.button}>
<View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
<Button
onPress={() => this.setState({ fontLoaded: true })}
title="Press Me To Load the App After 15 Seconds!"
color="#fe8200"
accessibilityLabel="Wait 15 seconds and then press me to load the font!"
/>
</View>
{this.state.fontLoaded ? (
<View style={styles.container}>
<Text style={{ fontFamily: 'JosefinSans-Regular', fontSize: 16 }}>
Whats on your mind? Create a post!
</Text>
<TextInput
style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
onChangeText={(postInput)=>this.setState({postInput})}
value={this.state.postInput}
/>
<Button
onPress={() => {
newPostRef.set({ content:this.state.postInput });
this.setState({ postInput: "Your post was succsesfully uploaded! :)" })
}}
title=" + "
color="#fe8200"
/>
var path = newPostRef.toString();
<ScrollView>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 350, height: 250, backgroundColor: '#1daff1', alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}} >
<Text style={{ fontFamily: 'JosefinSans-Regular', fontSize: 18, color: '#ffffff', textAlign: 'center'}}>
Why do android phones have higher inital quality than apple phones, but apple phones have a more consistent amount of quality throughout their years?
</Text>
</View>
<View style={{width: 350, height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
<Image source={require('./CandidtwoImages/unlove.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular', fontSize: 18, color: '#ffffff'}}>
3
</Text>
<Image source={require('./CandidtwoImages/undislike.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular', fontSize: 18, color: '#ffffff'}}>
1
</Text>
<Image source={require('./CandidtwoImages/comments.png')} />
<Text style={{ fontFamily: 'JosefinSans-Regular', fontSize: 18, color: '#ffffff'}}>
8
</Text>
</View>
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 35, height: 25, backgroundColor: '#147c41', borderRadius: 10}} />
<View style={{width: 35, height: 4, backgroundColor: '#0f582d', borderRadius: 10}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 35, height: 25, backgroundColor: '#9dcd46', borderRadius: 10}} />
<View style={{width: 35, height: 4, backgroundColor: '#6c8f31', borderRadius: 10}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
<View style={{width: 35, height: 25, backgroundColor: '#d3832e', borderRadius: 10}} />
<View style={{width: 35, height: 4, backgroundColor: '#935b1e', borderRadius: 10}} />
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
</ScrollView>
</View>) : (null) }
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 8,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
button: {
flex: 1,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
});
错误消息
推荐答案
因此，在此行中:
var ref = firebase.database().ref('posts');
当您的Firebase应用尚未初始化时，您正在尝试分配对Firebase数据库的引用.
You are trying to assign a reference to your firebase database when your firebase App is not initialized yet.
这里:
const firebaseApp = App.initializeApp(firebaseConfig);
您正在尝试从App类中调用initializeApp()方法初始化Firebase App，并且此方法属于您在上面进行的Firebase导入，因此无需初始化将其分配给您的Firebase App到变量.
You are trying to initialize the firebase App calling the initializeApp() method from your App class, and this method belongs to the firebase import that you've made above, and you don't need to initialize your firebase App assigning it to a variable.
您可以做的事情是这样的:
What you can do is something like this:
删除创建变量的行 ref ;
像这样初始化您的Firebase应用程序:
Initialize your firebase App like this:
firebase.initializeApp(config);
然后您可以创建变量 ref ;
And then you can create your variable ref;
var ref = firebase.database().ref('posts');
这篇关于尚未创建React Native/Firebase Error应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
