错误：找不到导航对象。您的组件是否在导航容器中？

Question

我试图从我的登录屏幕导航到主屏幕使用可按下的按钮。然而，我现在的代码给出了以下错误:找不到导航对象。。错误针对的是第8行(const navigation = useNavigation();)。LoginButton.js:

import React, { Component } from "react";
import { View, Text, Image, Pressable, Button } from "react-native";
import { useNavigation } from "@react-navigation/native";
import styles from "./styles";
import HomeScreen from "../../screens/Home";
const LoginButton = () => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<Pressable
onPress={() => navigation.navigate("Home")}
style={styles.button}
>
<Text style={styles.buttontext}>Login</Text>
</Pressable>
</View>
);
};
export default LoginButton;

LoginButton作为组件插入到最后一个<View中的LoginItem中。>LoginItem.js:

import React from "react";
import { View, Text, Image } from "react-native";
import styles from "./styles";
import LoginButton from "../LoginButton";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
const Stack = createNativeStackNavigator();
const LoginItem = (props) => {
return (
<View style={styles.logincontainer}>
{/* Background image of the login screen */}
<Image
source={require("../../../assets/images/blue-sky-start-screen.jpg")}
style={styles.loginbackground}
blurRadius={4}
></Image>
{/* Title of the login screen */}
<View style={styles.titlecontainer}>
<Text style={styles.companytitle}>BestelSnel</Text>
</View>
{/* Login button */}
<View style={styles.loginbutton}>
<LoginButton></LoginButton>
</View>
</View>
);
};
export default LoginItem;

Answer 1

useNavigation仅在您的组件位于NavigationContainer和Navigator内部时有效，如入门页所述:

https://reactnavigation.org/docs/hello-react-navigation

<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>

HomeScreen将是您的LoginItem

Answer 2

在我的例子中，我得到这个错误是因为自动完成添加了错误的导入语句。

import { useNavigation } from "@react-navigation/core";

但我需要的是:

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

希望这能帮助大家节省时间。

Answer 3

我也有这样的问题，而接受的答案对我不起作用。

我所做的工作是导入我想去的组件，并在navigate()调用中使用它。一般来说，这可能意味着删除引号，这样你的函数的参数是一个组件，而不是一个字符串。

给出问题中的代码，代码将是:

onPress={() => navigation.navigate(Home)}

与原文非常相似，只是减去引号，如前所述。

Answer 4

我也正确地传递了参数，但是参数中有一个react组件。这就是为什么它会给出这个错误。

//product不应该有react组件props.navigation。导航(ROUTE_TEST{产品});

Answer 5

当我在一个没有类或功能组件可以呈现的文件中分配useNavigation钩子时，也出现了这个错误。比如只包含导航和堆栈组件的App.js文件