如何防止登錄用戶看到登錄頁面

Question

所以我有一個我正在開發的 React Native 應用程序，這是我的身份驗證流程：

const Stack = createStackNavigator();

const MainContainer = () => {
  const { currentUser } = useAuth();

  if (currentUser) {
    return <HamburgerStack />;
  } else {
    return (
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Register" component={RegisterScreen} />
        <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
      </Stack.Navigator>
    );
  }
};

export default MainContainer;

我正在使用 firebase 進行身份驗證，而currentUser是一個上下文掛鈎。

當我進入應用程序並且我已經登錄時，會顯示身份驗證頁面，可能是因為 firebase 正在設備上查找用戶的信息。

我想不出如何阻止用戶看到它們。 有小費嗎？

感謝 ：）

Answer 1

我所做的是為儀表板、身份驗證、管理和啟動屏幕（虛擬）創建了一個單獨的堆棧，並將它們全部包裝在一個堆棧中。

MainStack.js

import React, { useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { StatusBar, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import AuthStack from './AuthStack';
import UserStack from './UserStack';
import AdminStack from './AdminStack';

import colors from '../constants/colors';
import Splash from '../screens/Splash';



export default function MainStack() {

    const Stack = createStackNavigator();

    return (
        <SafeAreaProvider>
            <NavigationContainer>

                <View>
                    <StatusBar backgroundColor={colors.DarkGrey} />
                </View>

                <Stack.Navigator initialRouteName='Splash' screenOptions={{ animationEnabled: false }}>
                    
                    <Stack.Screen name="Splash" component={Splash} options={{ headerShown: false }} />
                    <Stack.Screen name="AuthStack" component={AuthStack} options={{ headerShown: false }} />
                    <Stack.Screen name="UserStack" component={UserStack} options={{ headerShown: false }} />
                    <Stack.Screen name="AdminStack" component={AdminStack} options={{ headerShown: false }} />

                </Stack.Navigator>

            </NavigationContainer>
        </SafeAreaProvider>

    );
};

AuthStack.js

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Login from '../screens/AuthScreens/Login';
import Signup from '../screens/AuthScreens/Signup';

export default function AuthStack() {

    const Stack = createStackNavigator();

    return (

        <Stack.Navigator initialRouteName='Login' screenOptions={{ animationEnabled: false }}>
            <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
            <Stack.Screen name="Signup" component={Signup} options={{ headerShown: false }} />
        </Stack.Navigator>

    );
};

UserStack.js（儀表板）

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import TabNavigator from './TabNavigator/Index';
import EditProfile from '../screens/UserScreens/EditProfile';
import CarDetails from '../screens/UserScreens/CarDetails';
import Checkout from '../screens/UserScreens/Checkout';
import SelectCar from '../screens/UserScreens/SelectCar';
import BookingDetails from '../screens/UserScreens/BookingDetails';

export default function UserStack() {

    const Stack = createStackNavigator();

    return (

        <Stack.Navigator initialRouteName='TabNavigator' screenOptions={{ animationEnabled: false }}>

            <Stack.Screen name="TabNavigator" component={TabNavigator} options={{ headerShown: false }} />
            <Stack.Screen name="EditProfile" component={EditProfile} options={{ headerShown: false }} />
            <Stack.Screen name="SelectCar" component={SelectCar} options={{ headerShown: false }} />
            <Stack.Screen name="CarDetails" component={CarDetails} options={{ headerShown: false }} />
            <Stack.Screen name="Checkout" component={Checkout} options={{ headerShown: false }} />
            <Stack.Screen name="BookingDetails" component={BookingDetails} options={{ headerShown: false }} />
        </Stack.Navigator>

    );
};

Splash.js（這是一個沒有 UI 的屏幕）

在此，我必須從數據庫中獲取數據，因此您可以直接檢查用戶並導航

import React, { useEffect } from "react";
import { firebase } from "@react-native-firebase/auth"
import database from '@react-native-firebase/database';
import SplashScreen from 'react-native-splash-screen'

export default function Splash({ navigation }) {

    useEffect(() => {
        let user = firebase.auth().currentUser;
        // console.log('currentUser: ',user);
        if (user) {
            database()
                .ref('/Users/' + user.uid)
                .once('value')
                .then(snapshot => {
                    let Data = snapshot.val();
                    // console.log(Data);
                    if (Data.Role == 'ADMIN') {

                        navigation.replace('AdminStack');
                        SplashScreen.hide();

                        console.log("Success:", "Admin Logged In successfully");
                    } else {
                        navigation.replace('UserStack');
                        SplashScreen.hide();

                        console.log("Success:", "User Logged In successfully");
                    }
                })
        } else {
            navigation.replace('AuthStack')
            SplashScreen.hide();

        }
    }, [])
    return null;
}