React Native / Firebase无法找到变量" Ref"

时间:2017-10-28 02:11:40

标签: variables firebase react-native server

问题: 我正在尝试创建一个简单的应用程序,用户可以使用React Native和Firebase将内容发布到互联网上。当我添加代码来上传变量时," postInput"对于firebase,我收到了错误"无法找到变量:Ref。"我从来没有将ref定义为变量,但我认为它应该在我从firebase导入*时自动工作。我不知道为什么会这样,我会喜欢一些帮助。

错误: 无法找到变量:ref。

代码:

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

4 个答案:

答案 0 :(得分:1)

您在问题中提到您导入了firebase:  从firebase导入*

但在您的代码中,您提到了这样的: 从*&#39; firebase&#39;;

导入*作为firebase

您必须使用firebase.database()。ref(&#39; posts&#39;)或删除为firebase并在您的代码中使用database()。ref(&#39; posts&#39;)。希望它会有所帮助。

答案 1 :(得分:1)

您正在尝试访问不存在的ref变量。 通过导入文件顶部的firebase,您可以访问 您可以使用firebase变量:

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

答案 2 :(得分:0)

我不认为&#f; firebase&#39;是一个RN包。我相信你正在使用一个不会工作的npm模块。 RN有一个特定的firebase模块:https://github.com/invertase/react-native-firebase

答案 3 :(得分:0)

我相信你有点混淆了。您需要首先初始化firebase,然后使用ref中的database

示例

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