React Native: TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate') when click on button. Why?

Question

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

以下是我的 Login 和 Forgot password 屏幕的代码。在登录屏幕上，当我点击忘记密码按钮时，它会显示 TypeError: undefined is not an object (evaluating '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;

请查看并告诉我您的想法它有什么问题。

Answer 1

您必须使用 ForgetPasswordText 作为

const loginProps = this.props;
<ForgetPasswordText {...loginProps} />

这样，LoginScreen的props就传给了ForgetPasswordText。

React Native: TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate') when click on button. Why?

React Native: TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate') when click on button. Why?

navigation

reactjs

react-native

react-navigation

react-navigation-drawer