在世博项目中：条件导航问题e

Question

大家好我是React-native初学者， 所以我想要实现的是让用户在登录成功后第一次打开应用程序时进入登录屏幕，希望他被重定向到主页，我确实有一个嵌套在 StackNavigation 中的 ButtomNav，我也想使用 AsyncStorage
存储用户详细信息 登录屏幕.js

import React, {useState, useEffect } from "react";
import { View, Text, TextInput, TouchableOpacity } from "react-native";
import { useDispatch, useSelector } from "react-redux";
import { login } from "../slices/userSlice";
import AsyncStorage from "@react-native-async-storage/async-storage";

const Login = ({navigation}) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const dispatch = useDispatch();

  const user = useSelector((state) => state.user.userLogin)




  const submitHandler = () => {
    try {
         dispatch(login({ email, password }));
         AsyncStorage.setItem("@user", JSON.stringify(user));
      } catch (error) {
      console.log(error);
    }
  };



  return (
    <View className="w-full h-full justify-center items-center">
      <View className="w-5/6 flex flex-col justify-center items-center" >
        <Text className="text-4xl font-extrabold text-sky-800 mb-6"> Login</Text>
        <View className=" w-11/12 bg-sky-200 p-3 rounded mb-4" >
          <TextInput            
            placeholder="Email"
            placeholderTextColor="#003f5c"
            onChangeText={(text) => setEmail(text)}
          />
        </View>
        <View  className=" w-11/12 bg-sky-200 p-3 rounded" >
          <TextInput           
            secureTextEntry
            placeholder="Password"
            placeholderTextColor="#003f5c"
            onChangeText={(text) => setPassword(text)}
          />
        </View>
        <TouchableOpacity onPress={submitHandler} className="flex justify-center items-center w-3/5 bg-blue-800 h-12 mt-8 rounded-lg" >
          <Text className=" text-white font-extrabold" >LOGIN </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};


export default Login;

这是 App.js 文件

import { Provider, useDispatch, useSelector } from "react-redux";
import { StatusBar, ActivityIndicator, View, Button } from "react-native";
import store from "./redux/store";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from "@react-navigation/native";
import { Ionicons } from "@expo/vector-icons";
import HomeScreen from "./screens/HomeScreen";
import SingleProductScreen from "./screens/SingleProductScreen";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import AsyncStorage from "@react-native-async-storage/async-storage";
import Client from "./screens/Client";
import Cart from "./screens/Cart";
import Login from "./screens/Login";
import { useState, useEffect } from "react";
import { logout } from "./slices/userSlice";

const Stack = createNativeStackNavigator();
const BottomTap = createBottomTabNavigator();

function ButtomNav() {

  return (
    <BottomTap.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: "#0A1886" },
        headerTintColor: "white",
      }}
    >
      <BottomTap.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home" color={color} size={size} />
          ),
        }}
      />
      <BottomTap.Screen
        name="Clients"
        component={Client}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="people" color={color} size={size} />
          ),
        }}
      />
      <BottomTap.Screen
        name="Cart"
        component={Cart}
        options={{
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="cart" color={color} size={size} />
          ),
        }}
      />
     
    </BottomTap.Navigator>
  );
}

function Root() {
  const [isLoading, setIsLoading] = useState(true);
  const [userLogedIn, setUserLogedIn] = useState(null);
  const dispatch = useDispatch();

  useEffect(() => {
    const checkUserDetails = async () => {
      try {
        const user = await AsyncStorage.getItem("@user");
        if (user) {
          setUserLogedIn(user);
        }
      } catch (e) {
        console.error(e);
      }
      setIsLoading(false);
    };
    checkUserToken();
  }, [userLogedIn]); 

  

  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }
  return (
    <>
      <StatusBar style="light" />
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerStyle: { backgroundColor: "#0A1886" },
            headerTintColor: "white",
          }}
        >
          {userLogedIn !== null ? (
            <>
              <Stack.Screen
                name="Nav"
                component={ButtomNav}
                options={{
                  headerRight: () => (
                    <Button title="Log out" onPress={logoutHandler} />
                  ),
                  headerShown: false,
                }}
              />
              <Stack.Screen name="Product" component={SingleProductScreen} />
            </>
          ) : (
            <Stack.Screen 
              name="Login"
              component={Login}
              options={{
                title: "Sign in",
              }}
            />
          )}
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

export default function App() {

  return (
    <>
      <Provider store={store}>
        <Root />
      </Provider>
    </>
  );
}

这就是我到目前为止所得到的，现在当我第一次打开应用程序时，登录屏幕首先进行 git 渲染，当我登录时，我没有按预期重定向到主屏幕，而是收到一条错误消息

 ERROR  The action 'NAVIGATE' with payload {"name":"Nav"} was not handled by any navigator.

Do you have a screen named 'Nav'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

This is a development-only warning and won't be shown in production.

所以谁能帮我找到更好的方法来处理这个导航问题