Javascript 在React Native中的类内钩子

我想知道如何使用组件内部的功能从React导航模块在屏幕之间导航。根据文档，您必须通过在我的标记（此处）中包含onPress来包含useNavigation（）函数。问题 它向我显示了以下错误：'不变冲突：无效调用。钩子只能在函数组件的主体内部调用。”

我的本地组件：

import React，{Component}来自'React'；
从“react native”导入{View，StyleSheet，Image，TouchableOpacity}；
从“react native elements”导入{Text}；
从“expo linear gradient”导入{LinearGradient}；
从“道具类型”导入道具类型；
从'@react-navigation/native'导入{useNavigation}；
导出默认类HorizontalCard扩展组件{
静态类型={
屏幕：PropTypes.string，
标题：PropTypes.string，
desc:PropTypes.string，
img:PropTypes.string，
}
render（）{
const navigation=useNavigation（）；
返回(
navigation.navigate（this.props.screen）}style={styles.container}>
{this.props.title}
{this.props.desc}
)
}
}

谢谢。 问候,

---

Quentin

如果要使用

挂钩

，则不能将组件实现为

类

因此，如果您想使用

钩子

，您应该将组件实现为

函数

，因为

钩子

只能在

函数组件的主体内部调用

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,
};

因此，您的组件应该如下所示

将组件实现为s函数并使用挂钩。

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,
};

如果要使用
挂钩
，则不能将组件实现为
类

因此，如果您想使用
钩子
，您应该将组件实现为
函数
，因为
钩子
只能在
函数组件的主体内部调用

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,
};

因此，您的组件应该如下所示

将组件实现为s函数并使用挂钩。

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,
};

正如错误中明确指出的那样，不能在类组件内部使用钩子。请检查
您不能在类组件内使用钩子，因为错误中明确指出了这一点。请检查
非常感谢您的解决方案，事实上我现在更了解了@SennenRandika只是建议，基于类的版本可以通过包装在功能组件中与钩子一起使用，您可以在这里查看文档@GuruparanGiritharan Yeah。。。我没有意识到这一点。我认为如果我们想使用钩子，就必须使用函数组件。谢谢你在这里发表评论，并让我知道这一点。：-）不客气，我们可以这样做，但对于导航，可以使用包装工作区：）非常感谢您的解决方案，实际上我现在更了解了@SennenRandika只是建议，基于类的版本可以通过包装在功能组件中与钩子一起使用，您可以在这里查看文档@GuruparanGiritharan Yeah。。。我没有意识到这一点。我认为如果我们想使用钩子，就必须使用函数组件。谢谢你在这里发表评论，并让我知道这一点。：-）不客气，我们可以这样做，但对于导航，可以使用包装工作区：）