Блог

Я продолжаю получать эту ошибку — «undefined не является функцией (вычисляется ‘_app.default.auth()’)» после нажатия «login» или «signup» в моем приложении React Native.

Важно отметить, что и npm start, и react-native run-android, похоже, работают изначально, просто когда я нажимаю кнопки после этого, сборка завершается с ошибкой. В терминале нет других ошибок. Код также, похоже, отлично работает на Mac.

Я изменил импорт 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',
  },
});
  

Пожалуйста, проверьте свой 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;