反应导航不是功能错误。 -类组件

Question

我正在使用react本机类组件，并且正在使用react-navigation在应用程序中进行路由。该指南主要针对功能组件，我正在尝试使用类组件来实现它。但是，当我尝试从reactnavigation获取它时，总是会出现错误提示导航不是函数或未定义。非常抱歉，如果这是一个已经被问到的问题，因为我真的不熟悉此反应。

类组件

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

这是带有运行代码的示例

link

https://snack.expo.io/@asad_4561/66a195?session_id=snack-session-KW7Q2ZEXx&preview=true&platform=ios&iframeId=ybgifmgsi4&theme=dark

这是一个使用React Navigation（路由器）从一个屏幕切换到另一个屏幕的示例。

Answer 2

[首先，您必须确保导航道具已存在于您的类组件中（在代码中已存在），其次是this.props.navigation是对象，而不是像navigate, push那样具有不同功能的函数等等，因此您必须执行这些功能，这是我对您的代码所做的一些更改，希望对您有用。

   class HomeScreen extends React.Component { 

    constructor(props) {
        super(props);
        console.log(this.props);
        this.state = { hover: false };
       }
        navigateDetails(navigation)  {
         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 3

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

而且，我破坏了导航，就像const {navigation} = this.props;

完整代码行

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