我有两个导航器,一个用于未登录的用户,一个用于已登录的用户,我想基于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"
}
);
}