我正在学习React Native。按照Lynda的分步教程。我写了完全相同的代码但仍然我的应用程序无法正常工作。这是我的代码下面:
App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import firebase from 'firebase';
import Login from './components/Login'
type Props = {};
export default class App extends Component<Props> {
coponentWillMount(){
firebase.initializeApp({
apiKey: "xxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxx",
databaseURL: "xxxxxxxx",
projectId: "xxxxxxxxxx",
storageBucket: "",
messagingSenderId: "xxxxxxxx"
});
}
render() {
return (
<View style={styles.container}>
<Login />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
Login.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import {MKTextField, MKColor, MKButton} from 'react-native-material-kit'
import firebase from 'firebase'
import Loader from './Loader'
const LoginButton = MKButton.coloredButton()
.withText('Login')
.build();
const styles = StyleSheet.create({
form: {
paddingBottom: 10,
width: 200,
},
fieldStyle: {
height: 40,
color: MKColor.Orange,
width: 200
},
loginButtonArea: {
marginTop: 20
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
errorMessage: {
marginTop: 15,
fontSize: 15,
color: 'red',
alignSelf: 'center'
}
});
export default class Login extends Component<Props> {
constructor(props){
super(props);
this.state = {
email: '',
password: '',
error: '',
loading: false
};
}
renderLoader = () => {
if(this.state.loading){
return <Loader size="large" />
} else{
return <LoginButton onPress={this.onButtonPress} />
}
}
onButtonPress = () => {
this.setState({error: '', loading: true});
firebase.auth().signInWithEmailAndPassword(email, password)
.then(this.onAuthSuccess().bind(this))
.cacth(()=>{
firebase.auth().createUserWithEmailAndPassword(email, password)
.then(this.onAuthSuccess().bind(this))
.catch(this.onAuthFailed().bind(this))
})
}
onAuthSuccess() {
this.setState({
email: '',
password: '',
error: '',
loading: false
})
}
onAuthFailed() {
this.setState({
error: "Authentication Failed",
loading: false
})
}
render() {
const {container, form, loginButtonArea, fieldStyle, errorMessage} = styles;
return (
<View style={container}>
<MKTextField
text={this.state.email}
onTextChange={email=>this.setState({email})}
textInputStyle={fieldStyle}
placeholder="Email"
tintColor={MKColor.Teal} />
<MKTextField
text={this.state.password}
onTextChange={password=>this.setState({password})}
textInputStyle={fieldStyle}
placeholder="Password"
tintColor={MKColor.Teal}
password={true} />
<Text style={errorMessage} >
{this.state.error}
</Text>
<View style={loginButtonArea}>
{this.renderLoader()}
</View>
</View>
);
}
}
以下是我正在获取的错误消息
没有创建firebase应用'默认' - 调用firebase app.initializeapp()(app / no-app)
答案 0 :(得分:1)
在一个屏幕中初始化firebase不适合以后使用。我推荐你 https://github.com/invertase/react-native-firebase。他们的安装说明轻松,易于与您的项目集成。
答案 1 :(得分:0)
您拼写错误的componentWillMount()
。