为什么我得到 "action navigate with payload undefined was not handled by any navigator"？

Question

我正在尝试自己做一个小项目来了解 React-Native。

我有 2 个屏幕，我想通过按下按钮从 SplashScreen 导航到 HomeScreen。但它给了我一个错误。我应该添加什么来消除错误？

这是代码 App.js

import 'react-native-gesture-handler'; // react-navigation, must be on top
import React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import SplashScreen from "./src/screens/SplashScreen.js";
import HomeScreen from "./src/screens/HomeScreen.js";


const Stack = createStackNavigator();

const App = () => {

  
  return (
    // name is whatever you write
    // initialRouteName is which screen you want as your initial
    // when I add title, it will write it as title, not whats written in "name"
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Intro" screenOptions={{title:"helllloo"}}>
        <Stack.Screen name="Intro" component={SplashScreen} options={{title:"our intro"}} /> 
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
    
  );
};



export default App;

HomeScreen.js

import React from "react";
import { View, Text } from "react-native";

const HomeScreen = () => {
  return(
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  )
}

export default HomeScreen;

SplashScreen.js

import React from "react";
import { Text, View, Button } from "react-native";
import HomeScreen from "./HomeScreen";


const SplashScreen = ({ navigation }) => {
  // without flex:1, it will center on that row, not on whole page
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Hello</Text>
      <Button 
        title="Go to HomeScreen"
        onPress = {() => navigation.navigate(HomeScreen)}
      />
    </View>
  )
}


export default SplashScreen;

Answer 1

你在这里定义路线<Stack.Screen name="Home" component={HomeScreen} />

路线名称是"Home" 和路由组件 HomeScreen

导航呼叫navigation.navigate(route name not route component)

所以将 navigation.navigate(HomeScreen) 替换为 navigation.navigate("Home")

为什么我得到 "action navigate with payload undefined was not handled by any navigator"？

Why do I get "action navigate with payload undefined was not handled by any navigator"?

reactjs

react-native

react-navigation

react-navigation-v5