reactirectネイティブルータフラックスを使用してFirebaseユーザをメインコンポーネントにリダイレクト

Question

アプリが起動するたびにメインコンポーネントに誘導しようとしています。

私はナビゲーションラッパーとしてFire-Baseを使用し、バックエンドとしてFirebaseを、状態管理ライブラリとしてReduxを使用します。

ここに問題があります。私はfirebase.auth().onAuthStateChanged()をルーターコンポーネントに入れて、ユーザーがログインしているかどうかを判断します。

ユーザーがいない場合は、ログインコンポーネントを返します。

ログインしているユーザーがいる場合は、メインコンポーネントをスタックの基本コンポーネントとして返します。

このSO POSTは正確な問題を抱えており、提案された答えは反応ネイティブルータフラックスからSwitch Featureを使用することを示唆しています。私はそれを助けてくれませんでした。

ここに私のコードです。

App.js

import React, { Component } from 'react'; 

import firebase from 'firebase'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import ReduxThunk from 'redux-thunk' 
import reducers from './reducers'; 

import Router from './Router'; 

class App extends Component { 

    componentWillMount() { 
    firebase.initializeApp({ 
     //my firebase config 
    }); 
    } 

    render() { 
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk)); 

    return (
     <Provider store={store}> 
     <Router /> 
     </Provider> 
    ); 
    } 
} 

export default App; 

Router.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { isLoggedIn } from './actions'; 
import { Scene, Router, Actions, Switch } from 'react-native-router-flux'; 

import firebase from 'firebase'; 

import Login from './components/auth/Login'; 
import Register from './components/auth/Register'; 
import Main from './components/Main'; 

class RouterComponent extends Component { 

    state = { loggedIn: false } 

    componentWillMount() { 
    this.props.isLoggedIn(); 
    } 

    render() { 
    return(
     <Router sceneStyle={{ }} hideNavBar={true}> 
     <Scene key="root"> 
      <Scene key="authContainer" initial> 
      <Scene key="login" component={Login} title="Login Page" /> 
      <Scene key="register" component={Register} title="Register Page" /> 
      </Scene> 

      <Scene key="mainContainer"> 
      <Scene key="main" component={Main} title="Main Page" /> 
      </Scene> 
     </Scene> 
     </Router> 
    ) 
    } 
} 

export default connect(null, { isLoggedIn })(RouterComponent); 

私のReduxのアクションクリエイターの一部

export const isLoggedIn = (dispatch) => { 
    return(dispatch) => { 
    firebase.auth().onAuthStateChanged((user) => loginUserSuccess(dispatch, user)); 
    }; 
}; 

const loginUserSuccess = (dispatch, user) => { 
    dispatch({ 
    type: LOGIN_USER_SUCCESS, 
    payload: user 
    }); 
    Actions.mainContainer({ type: 'reset'}); 
}; 

私は、正確な動機はを達成することができる理解非同期スニペット以下：

firebase.auth().onAuthStateChanged(function(user) { 
    if (user) { 
    // return <Main /> 
    } else { 
    // Stay at login screen 
    } 
}); 

しかし、私はreact-native-router-fluxで再作成しようとしています。

ここでは、皆さんがもっと理解できるように、私のアプリのGIFショットがあります。 ユーザーは既にログインしています。しばらくするとメイン画面が送出されます。どんな考え？

Answer 1

（また、デフォルトのXcodeによって生成されたものを無効にする）と、この画面上で確認し、認証を行う任意の特定の制約があなたのアプリケーションであるかどうかはわからないが、私はスプラッシュ画面を使用しています。

ユーザーがログインしている場合、それ以外のログインコンポーネントにスタックをリセットし、メインコンポーネントにスタックをリセットします。