Question

抱歉，我没有找到任何解决方案。也许这完全是一种错误的方式。

App.js

import React, { Component } from 'react';
import { View } from 'react-native';

import Home from './app/screens/Home';
import Loading from './app/screens/Loading';
import Login from './app/screens/Login';
import Register from './app/screens/Register';
import styles from './app/assets/styles/login';

export default class App extends Component<{}> {
  states = {
    email: '',
    password: '',
    authenticating: false,
    user: null,
    error: '',
  }

  constructor(props) {
    super(props);
  }

  renderCurrentState() {
    if (this.state.authenticating) {
      return (
        <Loading />
      )
    }

    if (this.state.user !== null) {
      return (
        <Home />
      )
    }

    return (
      <Login />
    )
  }

  render() {
    return (
      <View style={styles.container}>
        {this.renderCurrentState()}
      </View>
    );
  }
}

reference.js

import * as firebase from 'firebase';

const config = {
    apiKey: "XXXXX",
    authDomain: "XXXXX",
    databaseURL: "XXXXX",
    projectId: "XXXXX",
    storageBucket: "XXXXX",
    messagingSenderId: "XXXXX"
};
export const firebaseApp = firebase.initializeApp(config);

const rootRef = firebase.database().ref();

export const tasksRef = rootRef.child('tasks');
export const timeRef = firebase.database.ServerValue.TIMESTAMP;

Login.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

import { firebaseApp } from '../config/reference';

import { Button } from '../components/Button';
import { Input } from '../components/Input';
import styles from '../assets/styles/login';

export default class Login extends Component {
  states = {
    email: '',
    password: '',
    authenticating: false,
    user: null,
    error: '',
  }

  constructor(props) {
    super(props);
  }

  onPressSignIn() {
    RTCStatsIceCandidatePairState.setState({
      authenticating: true,
    });

    const { email, password } = state.state;

    firebaseApp.auth().signInWithEmailAndPassword(email, password)
      .then(user => this.setState({
        authenticating: false,
        user,
        error: '',
      }))
      .catch(() => {
        // Login was not successful
        firebaseApp.auth().createUserWithEmailAndPassword(email, password)
          .then(user => this.setState({
            authenticating: false,
            user,
            error: '',
          }))
          .catch(() => this.setState({
            authenticating: false,
            user: null,
            error: 'Authentication Failure',
          }))
      })
  }

  render() {
    return (
      <View style={styles.form}>
        <Input
          placeholder='Enter your email...'
          label='Email'
          onChangeText={email => this.setState({ email })}
          value={this.state.email}
        />
        <Input
          placeholder='Enter your password...'
          label='Password'
          secureTextEntry
          onChangeText={password => this.setState({ password })}
          value={this.state.password}
        />
        <Button onPress={() => this.onPressSignIn()}>Log In</Button>
        <Text>{this.state.error}</Text>
      </View>
    )
  }
}

Home.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

import { firebaseApp } from '../config/reference';

import { Button } from '../components/Button';
import styles from '../assets/styles/login';

export default class Home extends Component {
  states = {
    email: '',
    password: '',
    authenticating: false,
    user: null,
    error: '',
  }

  constructor(props) {
    super(props);
  }

  onPressLogOut() {
    firebaseApp.auth().signOut()
      .then(() => {
        this.setState({
          email: '',
          password: '',
          authenticating: false,
          user: null,
    })
      }, error => {
        console.error('Sign Out Error', error);
      });
  }

    render() {
      return (
        <View style={styles.form}>
          <Text>Logged In</Text>
          <Button onPress={() => this.onPressLogOut()}>Log Out</Button>
        </View>
      )
    }
}

我必须分享以下状态：

states = {
  email: '',
  password: '',
  authenticating: false,
  user: null,
  error: '',
}

分享这种状态的好方法是什么？对不起，我是React和React Native的新手。如果状态被其他组件改变，我怎么能听？

如果我只使用一个组件，它就可以完美运行。我希望你理解我的问题

Answer 1

在React-Native中，State仅与组件相关。如果您需要在应用中共享数据，则应实施redux并将数据存储在商店中。你在互联网上有很多资源用于实现Redux和React-Native。

另外，您应该阅读有关Flux Architecture.

的更多信息

如何在react-native中处理firebase身份验证状态？

1 个答案: