React Native 错误 - 未定义不是函数（评估 '_app.default.auth()'）

Question

在我的 React Native 应用程序上点击“登录”或“注册”后，我不断收到此错误 - “未定义不是函数（评估 '_app.default.auth()'）”。

重要的是要注意 npm start 和 react-native run-android 最初似乎都可以工作，只是当我点击按钮之后，构建失败。终端中没有其他错误。该代码似乎也可以在 Mac 上完美运行。

我已将 import firebase 从 'firebase' 更改为 '@firebase/app'，因为之前出现“对象作为 React 子对象无效（找到带有键的对象...”的错误）

这是我的代码：

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 方法。我找到了this example，我们试试：

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;