类组件内的导航不起作用答案

【问题标题】：Navigation inside class component not working类组件内的导航不起作用
【发布时间】：2022-08-19 05:47:47
【问题描述】：

使用类组件时我不能使用导航它告诉无效的钩子。我如何在里面使用导航类组件?

这就是我想要实现的，类组件内的导航选项。其实我是新手。有人能帮帮我吗？

import React, { Component } from \'react\';

import { Text ,View ,TouchableOpacity } from \'react-native\';

import { useNavigation } from \'@react-navigation/native\';



class Mpin extends Component {

    const navigation= useNavigation();

  render() {

    return (

      <Text>....</Text>

      <TouchableOpacity onPress={()=>navigation.navigate(\'LoginPage\')}>

          <Text>SetMPIN</Text>

      </TouchableOpacity>

    );

  }

}



export default Mpin;

标签： reactjs react-native react-navigation

【解决方案1】：

您不能在类组件中使用钩子。在类组件中，您可以直接从道具访问导航对象。

this.props.navigation.navigate('LoginPage')

【讨论】：

这应该是公认的答案。当你可以直接访问你需要的东西时，你不需要一些绕过。

【解决方案2】：

其实我能理解你想说什么。我刚开始时也遇到过同样的错误。

在您的类组件中使用以下功能组件，如图所示。通过这样做，您可以访问类组件内的导航。

import React, { Component } from 'react';

import { Text ,View ,TouchableOpacity } from 'react-native';

import { useNavigation } from '@react-navigation/native';

function ForgotMpin() {
  const navigation = useNavigation();
  return (
    <View>
      <TouchableOpacity
        style={...}
        onPress={() => navigation.navigate("ForgotPin")}
      >
        <Text>... </Text>
      </TouchableOpacity>
    </View>
  );
}

class Mpin extends Component {


  render() {

    return (

      <Text>....</Text>


          
          <ForgotMpin screenName="forgotMpin" />


    );

  }

}



export default Mpin;

【讨论】：

【解决方案3】：

在这些情况下，您可以使用 vanilla js，以下代码可帮助您重定向或导航到其他路径：

window.locate.replace('/pathname')

如果你想使用 Navigate 或 useNavigate 你将不得不转换为函数组件而不是类组件

【讨论】：