我知道这是重复的问题，我尝试了 3-4 天的所有解决方案来解决它，但不明白为什么它会一次又一次地出现。我想我犯了一个愚蠢的错误，请帮我找出它。

以下是我的 登录 和 忘记密码 屏幕的代码。在登录屏幕上，当我单击“忘记密码”按钮时，它会抛出 TypeError：未定义不是对象（评估“this.props.navigation.navigate”）

// config/routes.js
import * as React from 'react';
import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import LoginScreen from "../layouts/LoginScreen";
import ForgotPasswordScreen from "../layouts/ForgetPassword";

const Stack = createStackNavigator();
const appName = "XXX";

const MyStack = () => {
    return (
        <Stack.Navigator initialRouteName='Login'>
            <Stack.Screen options={{
                            title: `Login - ${appName}`
                          }}
                          name='Login' component={LoginScreen} />
            <Stack.Screen options={{
                            headerLeft: ({props}) => (
                              <HeaderBackButton
                                {...props}
                                onPress={() => {
                                  navigation.navigate("Login")
                                }}
                              />
                            ),
                            title: `Forgot Password? - ${appName}`
                          }}
                          name='ForgotPasswordScreen'
                          component={ForgotPasswordScreen} />
        </Stack.Navigator>
    )
}

export default function AppStack() {
    return (
      <NavigationContainer>
        <MyStack />
      </NavigationContainer>
    );
};

接下来我已导入到另一个文件中并添加 <ForgetPasswordText /> 以添加按钮。

// layout/components/ForgetPasswordText.js
import React, { Component } from 'react'
import { View, Button } from 'react-native'
import { NavigationContainer } from '@react-navigation/native';


class ForgetPasswordText extends Component {

  constructor(props) {
    super(props);
    this.goToForgotPassword = this.goToForgotPassword.bind(this);
    this.state = {
    };
  }
  static navigationOptions = ({ navigation }) => ({
    title: navigation,
  });
  render() {
    return (
      <View>
        {/* <Text style={styles.textRight}>Forgot Password Screen?</Text> */}
        <Button
            title="Forgot Password?"
            onPress={this.goToForgotPassword}
            titleStyle={{
                color: '#039BE5'
            }}
            type="clear"
        />
      </View>
    )
  }
  goToForgotPassword() {
    console.log(this.props.navigation)  //output: undefined
    this.props.navigation.navigate('ForgotPasswordScreen');
  }
}
export default ForgetPasswordText;

在以下路径内访问 ForgetPasswordText 。

// layout/Login.js
import React from 'react';
import { View } from 'react-native';
import ForgetPasswordText from './components/ForgetPasswordText';

class LoginScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
    };
  }
  render() {
      return(
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>  
            <ForgetPasswordText />
        </View>
        )
    }
};
export default LoginScreen;

请检查并让我知道您的想法以及它有什么问题。