在条件语句中不工作的React导航

Question

在我的kept本机应用程序中，当在条件语句中使用它时，它会继续返回错误。

操作‘导航’的有效载荷{“名称”：“屏幕名称”}没有被任何导航器处理。你有一个名叫“屏幕名”的屏幕吗？

只有当我最小化屏幕并返回时，它才能起作用，

下面是处理登录过程的代码

import { useNavigation } from "@react-navigation/native"

const navigation = useNavigation()
const onLogin = async (data: FormData) => {
authenticationStore.login(data.email, data.password).then(() => {
  if (authenticationStore.isAuthenticated) {
    navigation.navigate('app', {
      screen: 'home',
    })
  }else if(authenticationStore.response == 'timeout'){
    alert('Request timed out')
  }else{
    alert('Invalid email or password')
  }
}
).catch((error) => {
  console.log(error)
}
)}

这是我的领航员

import React, { useState, useEffect, useRef } from "react"
import { useColorScheme } from "react-native"
import { NavigationContainer, DefaultTheme, DarkTheme, NavigatorScreenParams } from "@react-navigation/native"
import { createNativeStackNavigator } from "@react-navigation/native-stack"
import { navigationRef, useBackButtonHandler } from "./navigation-utilities"
import { SplashNavigator, SplashNavigatorParamList } from "./splash/splash-navigator"
import { AuthNavigator, AuthNavigatorParamList } from "./auth/auth-navigator"
import { BottomNavigator, BottomNavigatorParamList } from "./bottom/bottom-navigator"
import { useStores } from "../models"
import { observer } from "mobx-react-lite"

export type NavigatorParamList = {
  splash: NavigatorScreenParams<SplashNavigatorParamList>
  auth: NavigatorScreenParams<AuthNavigatorParamList>
  app: NavigatorScreenParams<BottomNavigatorParamList>
 }

// Documentation: https://reactnavigation.org/docs/stack-navigator/
const Stack = createNativeStackNavigator<NavigatorParamList>()

const AppStack = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
      initialRouteName="app"
    >
      <Stack.Screen name="app" component={BottomNavigator} />
      {/**  Your screens go here */}
    </Stack.Navigator>
  )
}

const AuthStack = () => {
  return(
    <Stack.Navigator
    screenOptions={{
      headerShown: false,
    }}
    initialRouteName="splash"
  >
    <Stack.Screen name="splash" component={SplashNavigator} />
    <Stack.Screen name="auth" component={AuthNavigator} />
  </Stack.Navigator>
  )
}

interface NavigationProps extends Partial<React.ComponentProps<typeof NavigationContainer>> { }

export const AppNavigator = (props: NavigationProps) => {
  const {authenticationStore} = useStores()
  const colorScheme = useColorScheme()
  useBackButtonHandler(canExit)
   return (
  
    <NavigationContainer
      ref={navigationRef}
      theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
      {...props}
    >
      {authenticationStore.isAuthenticated ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  )
}

AppNavigator.displayName = "AppNavigator"

const exitRoutes = ["welcome"]
export const canExit = (routeName: string) => exitRoutes.includes(routeName)

上述代码中的每个条件都可以工作，除了导航不能工作，除非我最小化屏幕并重新打开。我正在积极使用以下软件包

   "@react-navigation/material-bottom-tabs": "^6.2.1",
    "@react-navigation/native": "~6.0.1",
    "@react-navigation/native-stack": "^6.0.2",
    "@react-navigation/stack": "~6.0.1",

注意，我使用的是内置点火板。并尝试使用不同的导航方法，但仍然得到了相同的东西。

Answer 1

我必须了解到，我并没有像以前那样在我的导航堆栈中添加mob观察者，现在导航就可以正常工作了。