reactjs - 在 React Native Snap Carousel 中将 useNavigation 与渲染组件一起使用时，我收到了无效的 Hook 调用

Question

我在我的项目中使用 React Native Snap Carousel，我想在单击特定幻灯片并且使用功能组件时导航到某个页面。我正在尝试使用 navigation.navigate，但当我在 React Native Snap Carousel 中传递该组件时，它显示了无效的钩子调用。

组件文件

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  Image,
  Pressable,
} from "react-native";

export const SLIDER_WIDTH = Dimensions.get("window").width + 80;
export const ITEM_WIDTH = Math.round(SLIDER_WIDTH);

const CarouselCardItem = ({ item, index,}) => {
  return (
    <Pressable onPress={() => console.warn("helo")}>
      <View style={styles.container} key={index}>
        <Image source={{ uri: item.imgUrl }} style={styles.image} />
      </View>
    </Pressable>
  );
};

export default CarouselCardItem;

轮播文件

const CarouselCards = ({component,loop,sliderWidth,itemWidth,autoplay}) => {
  const isCarousel = useRef(null);
  return (
    <View>
      <Carousel
        layout="default"
        layoutCardOffset={9}
        ref={isCarousel}
        data={data}
        renderItem={component}
        sliderWidth={sliderWidth||SLIDER_WIDTH}
        itemWidth={itemWidth || ITEM_WIDTH}
        inactiveSlideShift={2}
        autoplay={autoplay}
        loop={loop}

        useScrollView={true}

      />
    </View>
  );
};

export default CarouselCards;