根据Firebase身份验证状态反应本机Chage导航器

时间:2018-07-12 16:45:57

标签: javascript firebase react-native react-navigation

我有两个导航器,一个用于未登录的用户,一个用于已登录的用户,我想基于firebase auth状态显示它,这是我的尝试,但是加载速度很慢,它始终基于组件的初始状态显示。

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

import createNavigation from './navigation/index';
import reducer from './reducers/index';
import { clearError, checkAuth } from './actions/AuthActions';
import { initializeFirebase } from './firebase/firebaseConfig';


const middleware = [thunk, logger];

const store = createStore(reducer, applyMiddleware(...middleware));

export default class App extends React.Component{
  
  state = {
    loggedIn: false
  }

  componentDidMount() {
    initializeFirebase();
    store.dispatch(checkAuth());
    const state = store.getState();
    const isLoggedIn = state.auth.loggedIn;
    this.setState({
      loggedIn: isLoggedIn
    });
  }
  
  render() {
    
    const Navigation = createNavigation(this.state.loggedIn);
    return (
    <Provider store={store}>
      <Navigation />
    </Provider>
    );
  }
}

检查身份验证操作会检查onAuthStateChanged并设置当前用户,该方法可以工作,但为时已晚。.

这是createNavigation:

export default createNavigation = (signedIn) => {
  return createSwitchNavigator(
    {

      App: TabNavigation,
      Auth: StackNavigation,
    },
    {
      initialRouteName: signedIn ? "App" : "Auth"
    }
  );
}

0 个答案:

没有答案