使用react-native-router-flux将登录的Firebase用户重定向到主组件

每次应用启动时，我都会尝试将用户定向到主要组件 .

我使用react-native-router-flux作为我的导航包装器，Firebase作为后端，Redux作为状态管理库 .

这是问题所在 . 我在我的路由器组件中执行 firebase.auth().onAuthStateChanged() 以确定用户是否已登录 .

如果没有用户，则返回Login组件 .

如果有用户登录，则返回Main Component作为堆栈中的基本组件 .

这个SO POST有确切的问题，建议的答案建议使用来自react-native-router-flux的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);

Some of my redux action creators

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-shot，以帮助你们了解更多 . 用户已登录 . 一段时间后将调度主屏幕 . 任何想法？