Tengo un navegador como el siguiente. Quiero mostrar el cajón cuando el usuario inició sesión. Sin embargo, isLogin seguirá siendo falso después de iniciar sesión. Como soy nuevo para reaccionar de forma nativa, ¿hay alguna solución para este problema? Además, quiero saber si hay buenas fuentes para aprender a reaccionar nativo.
let isLogin = firebase.auth().currentUser ? true : false; const HomeStack = () => { return ( <Stack.Navigator screenOptions={{ headerStyled: { backgroundColor: primary, }, headerLeftContainerStyle: { paddingLeft: 20, }, headerShown: false, }} initialRouteName="Home" > <Stack.Screen name="HomeScreen" component={Home} /> <Stack.Screen name="Login" component={Login} /> </Stack.Navigator> ); }; console.log(isLogin); const LoginStack = () => { return ( <Stack.Navigator screenOptions={{ headerStyled: { backgroundColor: primary, }, headerLeftContainerStyle: { paddingLeft: 20, }, headerShown: false, }} initialRouteName="Login" > <Stack.Screen name="Login" component={Login} /> <Stack.Screen name="Signup" component={Signup} /> <Stack.Screen name="Home" component={Home} /> </Stack.Navigator> ); }; const RootStack = () => { return ( <NavigationContainer> {/* {isLogin ? ( <Drawer.Navigator> <Drawer.Screen name="Home" component={HomeStack} /> <Drawer.Screen name="Chat" component={Chat} /> </Drawer.Navigator> ) : ( <LoginStack /> )} */} <LoginStack /> </NavigationContainer> ); }; export default RootStack;Debido a que inicializa la variable isLogin fuera del componente, obtiene valor solo una vez. Por lo tanto, debe colocar la variable de declaración en el componente.
const RootStack = () => { let isLogin = firebase.auth().currentUser ? true : false; return ( <NavigationContainer> {/* {isLogin ? ( <Drawer.Navigator> <Drawer.Screen name="Home" component={HomeStack} /> <Drawer.Screen name="Chat" component={Chat} /> </Drawer.Navigator> ) : ( <LoginStack /> )} */} <LoginStack /> </NavigationContainer> ); };