无法在React-Native中连接到Firebase

Question

我正在学习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（）（应用程序/无应用程序）

Answer 1

您将componentWillMount()拼写错误。