Хук внутри класса в React Native

Question

Мне бы хотелось узнать, как перемещаться с экрана на экран из модуля React Navigation с помощью функции useNavigation () внутри компонента. Согласно документации, вы должны включить функцию useNavigation (), включив onPress в мой тег (здесь). Проблема в том, что он показывает мне следующую ошибку: «Нарушение неизменности: недопустимый вызов. Хук может быть вызван только внутри тела функционального компонента. '

My React Native Component:

import React, { Component } from 'react';
import {View, StyleSheet, Image, TouchableOpacity} from "react-native";
import { Text } from 'react-native-elements';
import { LinearGradient } from 'expo-linear-gradient';
import PropTypes from 'prop-types';
import { useNavigation } from '@react-navigation/native';

export default class HorizontalCard extends Component {
    static propTypes = {
        screen: PropTypes.string,
        title: PropTypes.string,
        desc: PropTypes.string,
        img: PropTypes.string,
      }
    render() {
        const navigation = useNavigation();
        return (
             <TouchableOpacity onPress={() => navigation.navigate(this.props.screen)} style={styles.container}>
                <View style={styles.card_discord}>
                    <Image style={styles.card_discord_img} source={{uri: this.props.img}} />
                        <LinearGradient
                            start={[1.0, 0.5]}
                            end={[0.0, 0.5]}
                            colors={['rgba(42, 159, 255, 0.2)', '#333333', '#333333']}
                            style={styles.FadeAway}>
                            <View style={styles.FadeAway}>
                                <Text h4 style={styles.FadeAway_h2}>{this.props.title}</Text>
                                <Text style={styles.FadeAway_p}>{this.props.desc}</Text>
                            </View>
                        </LinearGradient>
                </View>   
            </TouchableOpacity>
        )
    }
}

Спасибо. С уважением,

Квентин

Answer 1

Вы не можете реализовать свои компоненты как classes, если хотите использовать hooks.

Итак, если вы хотите использовать hooks, вы должны реализовать свои компоненты как functions, поскольку hooks может вызываться только внутри тела function component.

Итак, ваш компонент должен быть следующим:

Реализация компонента как s FUNCTION и с помощью HOOKS.

import React from 'react';
import { View, StyleSheet, Image, TouchableOpacity } from 'react-native';
import { Text } from 'react-native-elements';
import { LinearGradient } from 'expo-linear-gradient';
import PropTypes from 'prop-types';
import { useNavigation } from '@react-navigation/native';

export function HorizontalCard(props) {
  const navigation = useNavigation();

  return (
    <TouchableOpacity
      onPress={() => navigation.navigate(props.screen)}
      style={styles.container}>
      <View style={styles.card_discord}>
        <Image style={styles.card_discord_img} source={{ uri: props.img }} />
        <LinearGradient
          start={[1.0, 0.5]}
          end={[0.0, 0.5]}
          colors={['rgba(42, 159, 255, 0.2)', '#333333', '#333333']}
          style={styles.FadeAway}>
          <View style={styles.FadeAway}>
            <Text h4 style={styles.FadeAway_h2}>
              {props.title}
            </Text>
            <Text style={styles.FadeAway_p}>{props.desc}</Text>
          </View>
        </LinearGradient>
      </View>
    </TouchableOpacity>
  );
}

HorizontalCard.propTypes = {
  screen: PropTypes.string,
  title: PropTypes.string,
  desc: PropTypes.string,
  img: PropTypes.string,
};

Но, если вам все еще нужно реализовать свой компонент как class, вы можете забыть об использовании useNavigation hook и продолжить с this.props.navigation.

В этом случае ваш компонент должен быть следующим:

Реализовать компонент как КЛАСС и БЕЗ КРЮКОВ

import React, { Component } from 'react';
import { View, StyleSheet, Image, TouchableOpacity } from 'react-native';
import { Text } from 'react-native-elements';
import { LinearGradient } from 'expo-linear-gradient';
import PropTypes from 'prop-types';

export default class HorizontalCard extends Component {
  constructor(props) {
    super(props);
  }

  static propTypes = {
    screen: PropTypes.string,
    title: PropTypes.string,
    desc: PropTypes.string,
    img: PropTypes.string,
  };

  render() {
    return (
      <TouchableOpacity
        onPress={() => this.props.navigation.navigate(this.props.screen)}
        style={styles.container}>
        <View style={styles.card_discord}>
          <Image
            style={styles.card_discord_img}
            source={{ uri: this.props.img }}
          />
          <LinearGradient
            start={[1.0, 0.5]}
            end={[0.0, 0.5]}
            colors={['rgba(42, 159, 255, 0.2)', '#333333', '#333333']}
            style={styles.FadeAway}>
            <View style={styles.FadeAway}>
              <Text h4 style={styles.FadeAway_h2}>
                {this.props.title}
              </Text>
              <Text style={styles.FadeAway_p}>{this.props.desc}</Text>
            </View>
          </LinearGradient>
        </View>
      </TouchableOpacity>
    );
  }
}

Answer 2

Вы не можете использовать ловушки внутри компонентов класса, как это ясно сказано в ошибке. Пожалуйста, проверьте документацию React