реакция навигации навигации не является ошибкой функции. - компонент класса

Question

Я использую компонент собственного класса реагирования и использую реагирующую навигацию для маршрутизации в приложении. Руководство в основном для функционального компонента, и я пытаюсь реализовать его с помощью компонентов класса. но когда я пытаюсь получить его от реагирования, всегда выдает ошибку, что навигация не является функцией или не определена. Прошу прощения, если это уже заданный вопрос, так как я действительно новичок в этой реакции.

компонент класса

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

Во-первых, вы должны убедиться, что в вашем компоненте класса существует навигационная опора (как видно из кода, он уже существует), а во-вторых, this.props.navigation - это объект, а не функция, которая выполняет другую функцию, такую ​​как * 1002. * et c поэтому вы должны выполнить эти функции, вот некоторые изменения, которые я сделал в вашем коде, и я надеюсь, что это сработает для вас.

   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

вот пример с рабочим кодом

ссылка

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

Это пример переключения с одного экрана на другой с использованием React Navigation (Router).

Answer 3

Кажется, я должен передать эту навигацию в функцию как переменную, чтобы работать. поэтому я изменил функцию, как показано ниже, чтобы передать навигацию функции, а также изменил this.navigateDetails(navigation) на ()=>this.navigateDetails(navigation)

. Кроме того, я уничтожил навигацию, как const {navigation} = this.props;

строка полного кода

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