Undefined is not an object 'navigation.navigate' React Native Navigation 5 (NEW)

问题

I am doing doing navigation with new react native navigation all I want is when button is pressed it navigate to next screen, I have followed new documentation but the problem is I am doing with classes and in the documentation all the work is done with functions in App.js, I tried to modify my code accordingly but couldn't do with classes as onPress button it does not navigate instead gives me error. This is my app.js:

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer,useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Nav from './screens/Nav';
import Home from './screens/Home';
import Login from './screens/Login';
const Stack = createStackNavigator();

export default class App extends React.Component {
  render(){
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode='none' initialRouteName="Nav">
        <Stack.Screen name="Splash" component={Nav} />
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
}

That is my Home.js from where when it clicks Login button it moves to next screen which is Login.js:

import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableHighlight,Image,BackHandler} from 'react-native';
import Login from './Login';
export default class Home extends Component {
  render() {
const { navigation } = this.props;
    return (
      <View style={styles.container}>
        <TouchableHighlight style={styles.buttonContainer} onPress={() => navigation.navigate('Login')}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>

      </View>
    );
  }
}

That is my Login.js Screen:

import React, { Component } from 'react';
import {StyleSheet, Text, View,TextInput,TouchableHighlight, Image} from 'react-native';
export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
          email   : '',
          password: '',
        }
      }
  render() {
    return (
      <View style={styles.container}>
      <Image source={require('../assets/logo.png')}
      style={{ width: 250, height: 250, marginHorizontal: 20 }}
                resizeMode="contain"/>
      <Text style = {styles.text}>UniQmove Training </Text> 
        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{uri: 'https://img.icons8.com/ultraviolet/40/000000/email.png'}}/>
          <TextInput style={styles.inputs}
              placeholder="Email"
              keyboardType="email-address"
              underlineColorAndroid='transparent'
              onChangeText={(email) => this.setState({email})}/>
        </View>

        <View style={styles.inputContainer}>

          <Image style={styles.inputIcon} source={{uri: 'https://img.icons8.com/ultraviolet/40/000000/password.png'}}/>
          <TextInput style={styles.inputs}
              placeholder="Password"
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(password) => this.setState({password})}/>
        </View>

        <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress={() => {this.loginRoles();this.handleLogin();}}>

          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

The problem is when I import Login.js in Home it is not using it in navigation.navigate('Login')

My package.jason:

{
  "name": "UniQmoves",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.7",
    "@react-navigation/native": "^5.0.9",
    "@react-navigation/stack": "^5.1.1",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "7.8.7",
    "@babel/runtime": "7.8.7",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.4",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

回答1:

there is a little change in code and your code will work fine

in App Class initialRouteName and screen name should same change Splash to Nav

<Stack.Navigator headerMode='none' initialRouteName="Nav">
        <Stack.Screen name="Splash" component={Nav} />

in Home class update after use this line

import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableHighlight,Image,BackHandler} from 'react-native';
import Login from './Login';
export default class Home extends Component {
  render() {

    return (
      <View style={styles.container}>
        //<TouchableHighlight style={styles.buttonContainer} onPress={() => navigation.navigate('Login')}>

use this

<TouchableHighlight style={styles.buttonContainer} onPress={() => this.props.navigation.navigate('Login')}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableHighlight>

      </View>
    );
  }
}

来源：https://stackoverflow.com/questions/60668530/undefined-is-not-an-object-navigation-navigate-react-native-navigation-5-new