React Native/Firebase kann die Variable "Ref" nicht finden

Question

Problem: Ich versuche eine einfache App zu erstellen, in der Benutzer mit React Native und Firebase Inhalte ins Internet stellen können. Als ich den Code zum Hochladen der Variablen "postInput" in Firebase hinzugefügt habe, habe ich den Fehler "Variable nicht finden: Ref." Ich habe Ref nie als Variable definiert, aber ich denke, es sollte automatisch funktionieren, wenn ich * von Firebase importiere. Ich weiß nicht, warum das so ist und ich würde etwas Hilfe lieben.

Fehler: Variable kann nicht gefunden werden: ref.

Code:

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 postRef = ref.child("posts"); 

var newPostRef = postsRef.push(); 

const firebaseConfig = { 
    apiKey: "__API_KEY__", 
    authDomain: "candidtwo.firebaseapp.com", 
    databaseURL: "https://candidtwo.firebaseio.com", 
    storageBucket: "candidtwo.appspot.com", 
}; 
const firebaseApp = firebase.initializeApp(firebaseConfig); 

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" 
    /> 

      <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' 
    }, 
}); 

Answer 1

Sie versuchen, eine ref Variable zuzugreifen, die nicht existiert. von firebase am Anfang der Datei zu importieren haben Sie Zugriff auf die firebase Variable, die Sie wie folgt verwenden können:

var postRef = firebase.database().ref('posts') 

Answer 2

Sie in Ihrer Frage erwähnt, dass Sie Feuerbasis als importiert: importiert * von Feuerbasis

aber in Ihrem Code erwähnt Sie wie folgt aus: import * als Feuerbasis aus "Firebase";

entweder Sie müssen firebase.database() verwenden. Ref ('posts') oder entfernen Sie als Firebase und verwenden Sie Datenbank(). Ref ('Beiträge') in Ihrem code.Hope wird es hilfreich sein.

Answer 3

Ich glaube nicht, Firebase ist ein RN-Paket. Ich glaube, du verwendest ein npm-Modul, das nicht funktioniert. Es gibt ein spezielles Firebase-Modul für RN: https://github.com/invertase/react-native-firebase

Answer 4

Ich glaube, du hast die Dinge ein bisschen durcheinander gebracht. Sie müssen Firebase zuerst initialisieren und dann ref von database verwenden.

Beispiel

import firebase from 'firebase'; 

const firebaseConfig = { 
    apiKey: "__API_KEY__", 
    authDomain: "someapp.firebaseapp.com", 
    databaseURL: "https://someapp.firebaseio.com", 
    storageBucket: "someapp.appspot.com", 
}; 
const firebaseApp = firebase.initializeApp(firebaseConfig); 
const Database = firebaseApp.database(); 

var postRef = Database.ref().child("posts");