React Native/Firebaseが変数 "Ref"を見つけることができません

Question

問題： ユーザーがReact NativeとFirebaseを使用してインターネットに記事を投稿できる簡単なアプリケーションを作成しようとしています。変数「postInput」をfirebaseにアップロードするためのコードを追加したとき、「Can not find variable：Ref」というエラーが表示されました。変数としてrefを定義したことはありませんが、Firebaseから*をインポートしたときに自動的に動作するはずです。なぜこれが、私はいくつかの助けを愛するだろうか分からない。

エラー： 変数：refが見つかりません。

コード：firebase

から輸入 *が、あなたのコードの中で、あなたはこのように述べた： インポート* firebaseとしてのあなたは、あなたのようにfirebaseを輸入し、あなたの質問に言及

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

あなたは存在しないref変数にアクセスしようとしています。

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

Answer 2

'firebase';

あなたはfirebase.database（）参考文献（「記事」）を使用する必要がありますかfirebaseおよび使用データベースとして削除（）参考文献（「記事」）のいずれかあなたのcode.Hopeにそれが参考になります。

Answer 3

「firebase」はRNパッケージではないと思います。私はあなたが動作しないnpmモジュールを使用していると信じています。 RN用の特定の火災基地モジュールがあります。https://github.com/invertase/react-native-firebase

Answer 4

私は少し混乱していると思います。最初に火災基地を初期化してから、databaseのrefを使用する必要があります。

例

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");