React native TypeError:undefined不是对象（评估props.navigation.navigate）

我的标题右侧有一个图标。按下时，我希望转到另一页。然而，它出现了一个错误。 这是我的“图标”屏幕：

    import React, { Component } from 'react';

  import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';

const Login = props => {
return (
  <View style={{ flexDirection: 'row' }}>
      <TouchableOpacity 
      onPress={() => {
        props.navigation.navigate({routeName: 'Login'});}}>
    <Image
      source={{
        uri:
          'https://clipartart.com/images/login-icon-clipart-5.jpg',
      }}
      style={{
        width: 40,
        height: 40,
        borderRadius: 40 / 2,
        marginLeft: 15,

      }}  
    />
    </TouchableOpacity>
  </View>
);
}


export default Login;

  import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer}  from 'react-navigation';
import React from 'react';

 import Homepage from './screens/Homepage';
 import Checkoutpage from './screens/Checkoutpage';
  import Filterpage from './screens/Filterpage';
 import Locationpage from './screens/Locationpage';
 import Menupage from './screens/MenuPage';
import Welcomepage from './screens/Welcomepage';
import Loginpage from './screens/Loginpage';
import Finalpage from './screens/Finalpage';
import Login from './Components/Login';


 const Navigation = createStackNavigator({
     Home:Homepage,
    Checkout: Checkoutpage,
Filter: Filterpage,
Location: Locationpage,
Menu: Menupage,
Welcome: Welcomepage,
Login: Loginpage,
Final: Finalpage
 },
 {
 defaultNavigationOptions: {
     headerRight:() => <Login/>
}
 }

);

import React，{Component}来自'React'；
从“react native”导入{样式表、视图、文本、图像、TouchableOpacity}；
const Login=props=>{
返回(
{
导航（{routeName:'Login'}）；}>
);
}
导出默认登录；

这是我的“导航”屏幕：

    import React, { Component } from 'react';

  import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';

const Login = props => {
return (
  <View style={{ flexDirection: 'row' }}>
      <TouchableOpacity 
      onPress={() => {
        props.navigation.navigate({routeName: 'Login'});}}>
    <Image
      source={{
        uri:
          'https://clipartart.com/images/login-icon-clipart-5.jpg',
      }}
      style={{
        width: 40,
        height: 40,
        borderRadius: 40 / 2,
        marginLeft: 15,

      }}  
    />
    </TouchableOpacity>
  </View>
);
}


export default Login;

  import {createStackNavigator} from 'react-navigation-stack';
import {createAppContainer}  from 'react-navigation';
import React from 'react';

 import Homepage from './screens/Homepage';
 import Checkoutpage from './screens/Checkoutpage';
  import Filterpage from './screens/Filterpage';
 import Locationpage from './screens/Locationpage';
 import Menupage from './screens/MenuPage';
import Welcomepage from './screens/Welcomepage';
import Loginpage from './screens/Loginpage';
import Finalpage from './screens/Finalpage';
import Login from './Components/Login';


 const Navigation = createStackNavigator({
     Home:Homepage,
    Checkout: Checkoutpage,
Filter: Filterpage,
Location: Locationpage,
Menu: Menupage,
Welcome: Welcomepage,
Login: Loginpage,
Final: Finalpage
 },
 {
 defaultNavigationOptions: {
     headerRight:() => <Login/>
}
 }

);

从“反应导航堆栈”导入{createStackNavigator}；
从“react navigation”导入{createAppContainer}；
从“React”导入React；
从“./屏幕/主页”导入主页；
从“/screens/Checkoutpage”导入Checkoutpage；
从“/screens/Filterpage”导入Filterpage；
从“./screens/Locationpage”导入Locationpage；
从“/screens/Menupage”导入菜单页；
从“/screens/Welcomepage”导入Welcomepage；
从“/screens/Loginpage”导入登录页面；
从“/screens/Finalpage”导入Finalpage；
从“./Components/Login”导入登录名；
const Navigation=createStackNavigator({
主页：，
签出：签出页面，
过滤器：过滤器页，
位置：Locationpage，
菜单：菜单页，
欢迎光临：欢迎光临，
登录：登录页面，
最后一页
},
{
默认导航选项：{
头灯：（）=>
}
}
);

---

我是个新来的本地人。因此，如果您发现了问题，请您详细解释，以便我理解。谢谢

因此，看起来您希望

导航

对象成为传递给

组件的道具的一部分。此对象位于

react-navigate

中

这意味着您需要以其他方式访问导航功能。幸运的是，这个库为您提供了。因此，在您的组件中使用它将类似于：

// react-navigation v5+
import { useNavigation } from '@react-navigation/native';

const Login = () => {
  const navigation = useNavigation();

  return (
    <View style={{ flexDirection: "row" }}>
      <TouchableOpacity
        onPress={() => {
          navigation.navigate({ routeName: "Login" });
        }}
      >
        <Image
          source={{
            uri: "https://clipartart.com/images/login-icon-clipart-5.jpg",
          }}
          style={{
            width: 40,
            height: 40,
            borderRadius: 40 / 2,
            marginLeft: 15,
          }}
        />
      </TouchableOpacity>
    </View>
  );
};

//react导航v5+
从'@react-navigation/native'导入{useNavigation}；
常量登录=（）=>{
const navigation=useNavigation（）；
返回(
{
导航（{routeName:“Login”}）；
}}
>
);
};

因此，看起来您希望

导航

对象是传递给

组件的道具的一部分。此对象位于

react-navigate

中

这意味着您需要以其他方式访问导航功能。幸运的是，这个库为您提供了。因此，在您的组件中使用它将类似于：

// react-navigation v5+
import { useNavigation } from '@react-navigation/native';

const Login = () => {
  const navigation = useNavigation();

  return (
    <View style={{ flexDirection: "row" }}>
      <TouchableOpacity
        onPress={() => {
          navigation.navigate({ routeName: "Login" });
        }}
      >
        <Image
          source={{
            uri: "https://clipartart.com/images/login-icon-clipart-5.jpg",
          }}
          style={{
            width: 40,
            height: 40,
            borderRadius: 40 / 2,
            marginLeft: 15,
          }}
        />
      </TouchableOpacity>
    </View>
  );
};

//react导航v5+
从'@react-navigation/native'导入{useNavigation}；
常量登录=（）=>{
const navigation=useNavigation（）；
返回(
{
导航（{routeName:“Login”}）；
}}
>
);
};

在我看来，您正在使用React Navigation v4.x，为了使用useNavigation挂钩，您需要升级到v5.x

默认情况下，导航道具将传递到所有屏幕，您可以使用useNavigation挂钩，如@faelks所建议的（如果在其他组件中需要）

首先升级到v5。

这里有一个v5.x版本的小示例：

从“React”导入React
从“react native”导入{按钮、视图、样式表}
从'@react navigation/native'导入{NavigationContainer}
从“@react navigation/stack”导入{createStackNavigator}
常量Home=（{navigation}）=>(
导航。导航（'Login'）}/>
)
常量登录=（{navigation}）=>(
navigation.goBack（）}/>
)
const Main=createStackNavigator（）
常量mainConfig={
//此堆栈的配置
初始路由名称：“主页”，
}
导出默认道具=>(
{/*此堆栈的其他屏幕*/}
)
const styles=StyleSheet.create({
组成部分：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
}
})

在我看来，您正在使用React Navigation v4.x，为了使用useNavigation挂钩，您需要升级到v5.x

默认情况下，导航道具将传递到所有屏幕，您可以使用useNavigation挂钩，如@faelks所建议的（如果在其他组件中需要）

首先升级到v5。

这里有一个v5.x版本的小示例：

从“React”导入React
从“react native”导入{按钮、视图、样式表}
从'@react navigation/native'导入{NavigationContainer}
从“@react navigation/stack”导入{createStackNavigator}
常量Home=（{navigation}）=>(
导航。导航（'Login'）}/>
)
常量登录=（{navigation}）=>(
navigation.goBack（）}/>
)
const Main=createStackNavigator（）
常量mainConfig={
//此堆栈的配置
初始路由名称：“主页”，
}
导出默认道具=>(
{/*此堆栈的其他屏幕*/}
)
const styles=StyleSheet.create({
组成部分：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
}
})

我完全按照你说的做了。现在出现了一个新错误：（0，_native.useNavigation）不是函数。（在“（0，_native.useNavigation）（），“（0，_native.useNavigation）”中未定义）。我需要下载什么吗？我完全按照你说的做了。现在出现了一个新错误：（0，_native.useNavigation）不是函数。（在“（0，_native.useNavigation）（），“（0，_native.useNavigation）”中未定义）。我需要下载一些东西吗？使用v4还有其他方法吗？我似乎无法下载v5@CevaComicIs有没有其他方法可以通过使用v4来实现这一点？我似乎无法下载v5@CevaComic