react-navigation 导航不是函数错误。 - 类组件答案

【问题标题】：react-navigation navigate is not a function error. - Class componentreact-navigation 导航不是函数错误。 - 类组件
【发布时间】：2020-08-12 06:30:31
【问题描述】：

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

类组件

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

【问题讨论】：

将onPress函数改为<Button onPress={this.props.navigation.navigate('Details')}>
@SDushan 我试图使用包装函数来实现这一点。似乎我必须将该导航作为变量传递给函数才能工作。 onPress={()=>this.navigateDetails(navigation)} 谢谢您的评论和详细信息
由于您已经在类组件中，您可以直接访问导航道具并且不必将navigation 作为参数传递。

标签： reactjs react-native react-navigation react-native-navigation react-component

【解决方案1】：

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

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

【讨论】：

它抛出相同的错误，即无法读取未定义的属性导航
嗨，我已经这样解决了。似乎我必须将该导航作为变量传递给函数才能工作。 onPress={()=>this.navigateDetails(navigation)} 谢谢您的评论和详细信息
@ThilinaDinithFonseka 现在您可以接受您认为最接近您的问题的答案。
您的回答对我不起作用。请检查下面我解释的答案。
好吧，因为我没有任何可行的演示我只能预测解决方案，很高兴知道您是否找到了解决方案。

【解决方案2】：

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

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

完整的代码行

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

【讨论】：