React Native - перейти к экрану - неверный вызов ловушки

Question

Приложение. js:

import React, { Component } from 'react';
import {View,Text} from 'react-native';
import { createDrawerNavigator } from 'react-navigation-drawer';
import {createAppContainer} from 'react-navigation';

import Epics from './screens/tmp';
import Pager from './screens/Pager';

const DrawerNavigator = createDrawerNavigator({
 Home: {screen: Epics},
 Page: {screen: Pager}
},{initialRouteName: 'Home'});

const Stack = createAppContainer(DrawerNavigator);

export default class App extends Component {
  render() {
    return <Stack />;
  }
}

Попытка перехода к экрану с помощью пользовательского компонента:

import { ActivityIndicator, Image, StyleSheet, View, TouchableHighlight } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';
import { useNavigation } from 'react-navigation-hooks';

import AuthorRow from './AuthorRow';

export default class Card extends React.Component {

  static propTypes = {
    fullname: PropTypes.string.isRequired,
    image: Image.propTypes.source.isRequired,
    linkText: PropTypes.string.isRequired,
    onPressLinkText: PropTypes.func.isRequired,
    epicId: PropTypes.string.isRequired,
  };

  state = {
    loading: true,
  };

  getNav(){
    return useNavigation();
  }

  handleLoad = () => {
    this.setState({ loading: false });
  };

  render() {
    const { fullname, image, linkText, onPressLinkText, epicId, prop } = this.props;
    const { loading } = this.state;

    return (
      <View>
        <AuthorRow
          fullname={fullname}
          linkText={linkText}
          onPressLinkText={onPressLinkText}
        />
        <TouchableHighlight onPress={() => this.getNav().navigate('Pager')} underlayColor="white">
          <View style={styles.image}>
            {loading && (
              <ActivityIndicator style={StyleSheet.absoluteFill} size={'large'} />
            )}
            <Image
              style={StyleSheet.absoluteFill}
              source={image}
              onLoad={this.handleLoad}
            />
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  image: {
    aspectRatio: 1,
    backgroundColor: 'rgba(0,0,0,0.02)',
  },
});

Из приведенного выше кода, попытка навигации с помощью:

import {useNavigation} из 'response-navigation-hooks';

getNav () {return useNavigation (); }

this.getNav (). Navigate ('Pager')

Ошибка в нашем заявлении: Нарушение инварианта: недопустимый вызов ловушки. Хуки могут быть вызваны только внутри тела компонента функции.

Как мне перейти с помощью «useNavigation ()» или как получить ссылку «this.props.navigation» в компоненте? (Я новичок в React Native, пожалуйста, помогите мне понять)

Обновление

Я попытался использовать "this.props.navigation", и это дает мне неопределенную ошибку:

Answer 1

    //In Card component remove this
    //import { useNavigation } from 'react-navigation-hooks';

    //Add this line
    import {withNavigation} from 'react-navigation';

    class Card extends React.Component {

      static propTypes = {
        fullname: PropTypes.string.isRequired,
        image: Image.propTypes.source.isRequired,
        linkText: PropTypes.string.isRequired,
        onPressLinkText: PropTypes.func.isRequired,
        epicId: PropTypes.string.isRequired,
      };

      state = {
        loading: true,
      };

    //Remove this
    //  getNav(){
     //   return useNavigation();
      //}

      handleLoad = () => {
        this.setState({ loading: false });
      };

      render() {
        const { fullname, image, linkText, onPressLinkText, epicId, prop } = this.props;
        const { loading } = this.state;

        return (
          <View>
            <AuthorRow
              fullname={fullname}
              linkText={linkText}
              onPressLinkText={onPressLinkText}
            />
            <TouchableHighlight onPress={() =>  
//Make change like this
 this.props.navigation.navigate('Pager')} underlayColor="white">
              <View style={styles.image}>
                {loading && (
                  <ActivityIndicator style={StyleSheet.absoluteFill} size={'large'} />
                )}
                <Image
                  style={StyleSheet.absoluteFill}
                  source={image}
                  onLoad={this.handleLoad}
                />
              </View>
            </TouchableHighlight>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      image: {
        aspectRatio: 1,
        backgroundColor: 'rgba(0,0,0,0.02)',
      },
    });
//Make change like this
    export default withNavigation(Card)

Answer 2

@ sayog ты нарушаешь правила брата. Не могли бы вы попробовать это?

const [loading, setLoading] = useState(false); const navigation = useNavigation();

убедитесь, что вы поставили после декларации вашего состояния

Примечание : Не использовать компонент класса для Hook. использовать функциональный компонент для крючка

Answer 3

здесь ваша ошибка

ошибка

onPress = {() => this.getNav (). Navigate ('Pager')

заменить на

onPress = {() => this.props.navigation.navigate ('Pager')

вот пример

https://reactnavigation.org/docs/navigating/

https://medium.com/@marizu_makozi / навигация между экранами или действиями с использованием реагирования-навигация-библиотека-68d57657d81

Другой пример кода

class FirstScreen extends React.Component {
  static navigationOptions = {
    title: 'First',
  }
  componentDidMount(){
    const {navigate} = this.props.navigation;
    navigate('Second');
    fetch('http://apiserver').then( (response) => {
      navigate('Second');
    });
  }
  render() {
    return (
      <AppLogo />
    );
  }
}

const AppNavigator = StackNavigator({
  First: {
    screen: FirstScreen,
  },
  Second: {
    screen: SecondScreen,
  },
});

Answer 4

Вы не можете использовать хуки внутри компонента Class, чтобы преобразовать ваш компонент класса в функциональный компонент или использовать объект навигации для навигации, передавая реквизиты навигации вашему компоненту this.props.navigation.navigate('screenName')