未定义不是对象'navigation.navigate' React Native Navigation 5（新）

Question

我正在使用新的 react native 导航进行导航，我想要的只是当按下按钮时导航到下一个屏幕，我遵循了新文档，但问题是我正在使用类，并且在文档中所有工作都已完成使用 App.js 中的函数，我尝试相应地修改我的代码，但无法使用类作为 onPress 按钮，它不会导航而是给我错误。 这是我的 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>
  );
}
}

这是我的 Home.js，当它点击登录按钮时，它会移动到下一个屏幕，即 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>
    );
  }
}

那是我的 Login.js 屏幕：

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>
    );
  }
}

问题是当我在 Home 中导入 Login.js 时，它没有在 navigation.navigate('Login') 中使用它

我的 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"
  }
}

Answer 1

代码稍有改动，您的代码就可以正常工作了

在 App Class 中的 initialRouteName 和 screen name 应该相同地将 Splash 更改为 Nav

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

在 Home 类更新后使用此行

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>
    );
  }
}