有条件地选择反应导航v5中的身份验证流程屏幕不更新

时间:2020-07-23 22:57:42

标签: firebase react-native react-navigation

我正在尝试使用React Navigation v5为React Native应用程序创建身份验证流。即使我确定在我登录时firebase.auth()。currentUser!= null的评估结果为true,而在退出时的评估结果为false,该页面也不会自动变为“ Closet”页面,就像它在这里所说的那样:{ {3}}。我确定我登录正确,因为我可以打印出firebase.auth()。currentUser并查看它是否为空。

为什么登录和注销后不能自动更改页面?我的代码在下面

注意:我在条件表中使用了isLoggedIn而不是firebase.auth()。currentUser,但都无法正常工作

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack'
import SignIn from '../screens/SignIn';
import TabNavigator from './TabNavigator';
import { connect } from 'react-redux';
import firebase from '../config/fbConfig';

const Stack = createStackNavigator();

const AuthNavigator = () => {
 var isLoggedIn = false;

 firebase.auth().onAuthStateChanged(function(user) {
   if(user){
     console.log("Auth says logged in");
     isLoggedIn = true;
   } else {
     console.log("Auth says logged out");
     isLoggedIn = false;
   }
 })
 
 return ( 
     <Stack.Navigator headerMode="none">
         {firebase.auth().currentUser != null ? ( 
                 <Stack.Screen name="Closet" component={TabNavigator} />
          ) : (
                 <Stack.Screen name="Sign In" component={SignIn} />

          )}

     </Stack.Navigator>
  );
}

export default AuthNavigator;

1 个答案:

答案 0 :(得分:0)

这是因为我没有使用状态。我将isLoggedIn的声明替换为

const [isLoggedIn, setIsLoggedIn] = useState(false);