问题: 我正在尝试创建一个简单的应用程序,用户可以使用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'
},
});
答案 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");