React 本机错误 - undefined 不是一个函数(评估 '_app.default.auth()')

Question

我不断遇到此错误 - " Undefined不是一个函数（评估'_app.default.auth（）'）"在我的React Native App上击中" login"或" cignup"后。

重要的是要注意，NPM启动和反应原始运行Android最初都起作用，就在我单击按钮之后，构建失败了。终端中没有其他错误。该代码似乎也可以在Mac上完美工作。

由于先前的错误，"对象无效，因为" firebase'"将导入的firebase从" firebase"更改为"@firebase/app"。

这是我的代码：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import firebase from '@firebase/app'
import SignUp from './components/auth/signup'
import ItWorked from './components/auth/itworked'
var config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: ""
};
firebase.initializeApp(config);
export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      userEmail: null
    }
    this.signIn = this.signIn.bind(this)
  }
  authCheck() {
    firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      var displayName = user.displayName;
      var email = user.email;
      var emailVerified = user.emailVerified;
      var photoURL = user.photoURL;
      var isAnonymous = user.isAnonymous;
      var uid = user.uid;
      var providerData = user.providerData;
      this.setState({auth: true})
    } else {
      console.log('Not today')
    }
   })
  }
  componentDidMount() {
    this.authListener()
  }
  authListener() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({userEmail: user.email})
      } else {
        this.setState({userEmail: null})
      }
      })
  }
  toggleLogin() {
    this.state.auth ? this.setState({auth: false}) : this.setState({auth: true})
  }
  async componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      })
  }
  signIn(email, password) {
    firebase.auth().signInWithEmailAndPassword(email, password)
      .catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
      })
  }
  signUp(email, password) {
    firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
    })
  }
  logOut() {
    firebase.auth().signOut()
  }
  render() {
    return (
      <View style={styles.container}>
        {this.state.userEmail ? <TabNavigator /> : <SignUp signIn={this.signIn} signUp={this.signUp} toggleLogin={this.toggleLogin}/>}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

Answer 1

请检查您的import方法。我找到了这个示例，让我们尝试一下：

import app from 'firebase/app';
const config = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
};
class Firebase {
  constructor() {
    app.initializeApp(config);
  }
}
export default Firebase;