类组件内的导航不起作用

Question

在使用类组件时，我无法使用导航它的无效钩子。如何在类组件内使用导航？

这就是我想要实现的，类组件内的导航选项。实际上我是新手。有人可以帮助我吗？

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;

Answer 1

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

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

Answer 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;