1

每次应用程序启动时，我都会尝试将用户引导至主组件。

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

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

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

如果有用户登录，则返回主组件，作为堆栈中的基础组件。

这个SO POST有确切的问题，提出的答案建议使用react-native-router-flux 中的Switch Feature。我试了一下，没用。

这是我的代码。

应用程序.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;

路由器.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 截图，以帮助你们了解更多。用户已经登录。一段时间后将发送主屏幕。任何想法？ 动图

4

1 回答 1

0

我不知道您的应用程序中是否有任何特定限制，但我正在使用启动画面（也禁用 Xcode 生成的默认屏幕）并在此屏幕上执行身份验证检查。

如果用户已登录，则将堆栈重置为主组件，否则将堆栈重置为登录组件。

于 2016-10-24T16:26:58.103 回答