React-Native：登录和主屏幕之间的导航

Question

我正在尝试创建一个带有登录屏幕的应用程序和一个带有标签导航的主屏幕。但是我无法使其从登录屏幕导航到主屏幕。我有错误

NAVIGATE with payload {"name":"HOME"} was not handled by any navigator

这是我的App.js

import React, { useState, useEffect } from 'react';
import {
  View,
  Text
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import TabNavigation from './Screens/TabNavigation'
import AsyncStorage from '@react-native-community/async-storage';
import SignInScreen from './Screens/SignInScreen'

const Stack = createStackNavigator();

function SplashScreen() {
  return (
    <View>
      <Text>Loading...</Text> 
    </View>
  );
}

const App = ({navigation}) => {
  const [isLoading, setIsLoading] = useState(true)
  const [userToken, setUserToken] = useState(null)

  const CheckUser = async()=> {
    let token
    try{
      token = await AsyncStorage.getItem('UserToken')
      setUserToken(token)
      setIsLoading(false)
    }catch{
      //failure code
    }
  }

  useEffect(()=>{
    CheckUser()
  },[])

  return(
    <NavigationContainer>
      <Stack.Navigator>
        {isLoading?
          <Stack.Screen name="Splash" component={SplashScreen} />:
          (userToken==null?
            <Stack.Screen name="SignIn" component={SignInScreen} />:
            <Stack.Screen name="Home" component={TabNavigation} />
          )
        }
      </Stack.Navigator>
    </NavigationContainer>
  )
};
export default App;

这是我的SignIn.js

import React from "react";
import { View, Text,StyleSheet, TouchableOpacity } from "react-native";
import AsyncStorage from "@react-native-community/async-storage";

const SignIn = ({navigation}) => {
    const _handleSignIn = async () =>{
        try{
            await AsyncStorage.setItem('UserToken', '123')
            navigation.navigate('Home')
        }catch{
            //failure here
        }
    }
    return(
        <View style={styles.container}>
            <TouchableOpacity onPress={()=>{_handleSignIn()}}>
                <Text>SignIn</Text>
            </TouchableOpacity>
        </View>
    );
}
const styles = StyleSheet.create({
    container:{
        backgroundColor: "red",
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }
})
export default SignIn;

TabNavigation组件包含我的主屏幕导航，当不使用SignIn组件时，它可以完美工作

编辑：这是TabNavigation的代码

import React from 'react'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Screen1 from "./Screen1";
import Screen2 from "./Screen2";
import Screen3 from "./Screen3";

const Tab = createMaterialTopTabNavigator()

const TabNavigation = () => {
    return(
        <Tab.Navigator initialRouteName="Screen1">
            <Tab.Screen name="Screen2" component={Screen2} />
            <Tab.Screen name="Screen1" component={Screen1} />
            <Tab.Screen name="Screen3" component={Screen3} />
        </Tab.Navigator>
    )
}
export default TabNavigation;

Answer 1

我认为您的代码的这一部分引起了错误：-

{isLoading?
      <Stack.Screen name="Splash" component={SplashScreen} />:
      (userToken==null?
        <Stack.Screen name="SignIn" component={SignInScreen} />:
        <Stack.Screen name="Home" component={TabNavigation} />
      )
    }