react-nativeでのfirebase認証状態の処理方法は？

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 and React Nativeの新しいです。そして、状態が他のコンポーネントによって変更された場合、どのように聞くことができますか？

コンポーネントを1つしか使用しない場合は、完全に機能します。私はあなたが私の問題を理解してくれることを願っています。

Answer 1

リアクションネイティブでは、状態はコンポーネントにのみ関連しています。アプリでデータを共有する必要がある場合は、reduxを実装し、データを保管しておく必要があります。 React-Nativeを使用してReduxを実装するために、インターネットに多数のリソースがあります。

さらにお読みくださいFlux Architecture.