react-navigation navigate is not a function 错误。 - Class 组件

Question

我正在使用 react native class 组件，并且我正在使用 react-navigation 在应用程序中进行路由。该指南主要针对功能组件，我正在尝试使用 class 组件来实现它。但是当我试图从 reactnavigation 中获取它时，它总是会抛出导航不是函数或未定义的错误。如果这是一个已经问过的问题，我很抱歉，因为我对这个 React Native 真的很陌生。

class 分量

import React from 'react';
import { useNavigation } from '@react-navigation/native';
import { Button, Divider, Layout, TopNavigation ,Card,Text} from '@ui-kitten/components';

class HomeScreen extends React.Component {

     navigateDetails(navigation)  {
         debugger
         navigation('Details');
    };

    constructor(props) {
        super(props);
        console.log(this.props);
        this.state = { hover: false };
    }

    render()  {
        const navigation = this.props;
        return(

            <Button onPress={this.navigateDetails}>OPEN DETAILS</Button>

        );
    }
}

export default function (props) {
    const navigation = useNavigation();
    return <HomeScreen {...props} navigation={navigation} />;
}

Answer 1

首先，您必须确保 class 组件中存在导航道具（在您的代码中查看它已经存在），第二件事是 this.props.navigation 是一个对象，而不是具有不同功能的函数，例如 navigate, push 等，因此您必须执行这些函数，这是我在您的代码中所做的一些更改，我希望这对您有用。

   class HomeScreen extends React.Component { 

    constructor(props) {
        super(props);
        console.log(this.props);
        this.state = { hover: false };
       }
        navigateDetails()  {
         this.props.navigation.navigate('Details');
       };

    render()  {
        const navigation = this.props;
        return(

            <Button onPress={()=>this.navigateDetails()}>OPEN DETAILS</Button>

        );
    }
}

export default function (props) {
    const navigation = useNavigation();
    return <HomeScreen {...props} navigation={navigation} />;
}

Answer 2

看来我必须将该导航作为变量传递给函数才能工作。所以我改变了下面的功能以将导航传递给 函数，也将 this.navigateDetails(navigation) 更改为 ()=>this.navigateDetails(navigation)

另外，我破坏了导航const {navigation} = this.props;

完整代码行

 onPress={()=>this.navigateDetails(navigation)}