Я использую стековый навигатор с реагировать на навигацию v5 с избыточностью Навигатор стека должен отображать AuthScreen, если isAuthenticated
равно false
, и HomeScreen, когда isAuthenticated
изменяется на true
.
AppNav. js
import React, {useState, useEffect} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import { connect } from 'react-redux';
import AuthScreen from '../screens/AuthScreen';
import HomeScreen from '../screens/HomeScreen';
const Stack = createStackNavigator();
const AppNav = ({isAuthenticated}) => {
const [logged, setLogged] = useState(false)
useEffect(() => {
if(isAuthenticated) {
console.log(logged);
setLogged(true);
} else {
setLogged(false);
console.log(logged);
}
},[isAuthenticated])
return (
<NavigationContainer>
<Stack.Navigator>
{
!logged?
<Stack.Screen name='Auth' component={AuthScreen} options={{headerShown: false}} />
:<Stack.Screen name='Home' component={HomeScreen} options={{headerShown: false}} />
}
</Stack.Navigator>
</NavigationContainer>
);
}
const mapStateToProps = ({isAuthenticated}) => {
return {
isAuthenticated
};
}
export default connect(mapStateToProps, null)(AppNav)
userAction. js
import {LOGIN_WITH_FACEBOOK} from './types';
export const loginWithFacebook = () => async(dispatch) => {
dispatch( { type: LOGIN_WITH_FACEBOOK, payload: {isAuthenticated: true} } );
}
userReducer. js
import {LOGIN_WITH_FACEBOOK} from '../actions/types.js';
const INITIAL_STATE = {
isAuthenticated: false
};
const userReducer = (state=INITIAL_STATE, action) => {
switch(action.type){
case LOGIN_WITH_FACEBOOK:
return {...state, ...action.payload};
default:
return state;
}
}
export default userReducer
rootReducer. js
import {combineReducers} from 'redux';
import userReducer from './userReducer';
const rootReducer = combineReducers({
user: userReducer
})
export default rootReducer