reactjs - 按下按钮时身份验证和 UI 失败

问题描述

我开始学习 react-native，现在我创建了一些组件，以便在我的 firebase 项目中使用签名。我已经从 firebase 控制台创建了一个 firebase 项目并处理了很多错误。最后，我将 App.js 创建为：

import React, {Component} from 'react';
import {View} from 'react-native';
//import firebase from 'firebase';
//import firebase from '@firebase/app';
import * as firebase from 'firebase';
import '@firebase/auth';
import Header from './src/components/common/Header';
import LoginForm from './src/components/LoginForm';
import CardSection from './src/components/common/CardSection';
import Button from './src/components/common/Button';
import Spinner from './src/components/common/Spinner';

class Main extends Component {
  state = {loggedIn: null};
  componentDidMount() {
    if (!firebase.apps.length) {
      firebase.initializeApp({
        apiKey: 'AIzaSyCuggnPGozfGB9M1elP7yOG5kdH3Xk5BDM',
        authDomain: 'digitus-trial.firebaseapp.com',
        databaseURL:
          'https://digitus-trial-default-rtdb.europe-west1.firebasedatabase.app',
        projectId: 'digitus-trial',
        storageBucket: 'digitus-trial.appspot.com',
        messagingSenderId: '811615820065',
        appId: '1:811615820065:web:993900aab9e5927b5a0660',
        measurementId: 'G-4KSTW48LX0',
      });
    } else {
      firebase.app();
    }

    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({loggedIn: true});
      } else {
        this.setState({loggedIn: false});
      }
    });
  }
  logoutClicked() {
    firebase.auth().signOut();
  }
  renderContent() {
    switch (this.state.loggedIn) {
      case true:
        return (
          <CardSection>
            <Button onPress={this.logoutClicked.bind(this)}>Logout</Button>
          </CardSection>
        );
      case false:
        return <LoginForm />;
      default:
        return (
          <View>
            <Spinner size="large" />
          </View>
        );
    }
  }

  render() {
    return (
      <View>
        <Header headerText="Digitus Trial" />
        {this.renderContent()}
      </View>
    );
  }
}

export default Main;

我的问题是当我按下登录按钮时，我的按钮淡出而不是显示指示器。而且我也没有收到任何我已经将 console.log 标记的消息。我正在使用 Windows 10 和 Android 模拟器。你能帮我吗？欲了解更多信息，这里是我的表单文件：

import React, {Component} from 'react';
import {TextInput} from 'react-native';
import firebase from '@firebase/app';
import '@firebase/auth';
import Button from './common/Button';
import Card from './common/Card';
import CardSection from './common/CardSection';
import Spinner from './common/Spinner';

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {email: '', password: '', loading: false};
  }
  loginClick() {
    this.setState({loading: true});
    const {email, password} = this.state;
    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(this.loginSuccess.bind(this))
      .catch(() => {
        firebase
          .auth()
          .createUserWithEmailAndPassword(email, password)
          .then(this.loginSuccess.bind(this))
          .catch(this.loginFail.bind(this));
      });
  }

  onPressSignIn() {
    this.setState({
      loading: true,
    });
  }

  renderCurrentState() {
    const {inputStyle} = styles;
    if (this.state.loading) {
      return (
        <Card>
          <CardSection>
            <TextInput
              placeholder="Email"
              style={inputStyle}
              value={this.state.email}
              onChangeText={(email) => this.setState({email})}
            />
          </CardSection>
          <CardSection>
            <TextInput
              placeholder="Password"
              style={inputStyle}
              value={this.state.password}
              onChangeText={(password) => this.setState({password})}
            />
          </CardSection>
          <CardSection>
            <Spinner size="large" />
          </CardSection>
        </Card>
      );
    }

    return (
      <Card>
        <CardSection>
          <TextInput
            placeholder="Email"
            style={inputStyle}
            value={this.state.email}
            onChangeText={(email) => this.setState({email})}
          />
        </CardSection>
        <CardSection>
          <TextInput
            placeholder="Password"
            style={inputStyle}
            value={this.state.password}
            onChangeText={(password) => this.setState({password})}
          />
        </CardSection>
        <CardSection>
          <Button onPress={() => this.onPressSignIn()}>Login</Button>
        </CardSection>
      </Card>
    );
  }
  render() {
    return <Card>{this.renderCurrentState()}</Card>;
  }
}
//Android has no shadow property, in order to use in IOS emulator make elevation:1
const styles = {
  inputStyle: {
    color: '#000',
    paddingRight: 5,
    paddingLeft: 5,
    fontSize: 18,
    lineHeight: 23,
    flex: 1,
  },
};

export default LoginForm;

标签： reactjsfirebasereact-nativereact-reduxfirebase-authentication

reactjs - 按下按钮时身份验证和 UI 失败

问题描述

解决方案

推荐阅读