React Native Snap Carousel使用render组件调用useNavigation报无效Hook错误

你遇到的Invalid Hook call错误主要由两个常见原因导致：

1. 轮播组件的renderItem参数要求传入返回React元素的渲染函数，你直接传入组件本身，会导致组件内部Hook的调用时机不符合React Hook规则
2. 如果你在CarouselCardItem内直接调用useNavigation获取导航实例，要么是调用位置不在组件顶层，要么是整个轮播组件不在NavigationContainer的上下文范围内，无法获取导航实例

第一步：修改轮播组件的参数逻辑 #

轮播文件修复后代码如下：

import React, { useRef } from "react";
import { View } from "react-native";
import Carousel from "react-native-snap-carousel";
import { SLIDER_WIDTH, ITEM_WIDTH } from "./CarouselCardItem"; // 按你的实际路径调整

const CarouselCards = ({
  data, // 补充缺失的data入参
  renderItem, // 把component改为renderItem渲染函数
  loop,
  sliderWidth,
  itemWidth,
  autoplay
}) => {
  const isCarousel = useRef(null);
  return (
    <View>
      <Carousel
        layout="default"
        layoutCardOffset={9}
        ref={isCarousel}
        data={data}
        renderItem={renderItem} // 直接传入渲染函数
        sliderWidth={sliderWidth||SLIDER_WIDTH}
        itemWidth={itemWidth || ITEM_WIDTH}
        inactiveSlideShift={2}
        autoplay={autoplay}
        loop={loop}
        useScrollView={true}
      />
    </View>
  );
};

export default CarouselCards;

第二步：修改轮播项组件，支持跳转逻辑 #

组件文件修复后代码如下：

import React from "react";
import {
  View,
  StyleSheet,
  Dimensions,
  Image,
  Pressable,
} from "react-native";
import { useNavigation } from "@react-navigation/native"; // 导入导航Hook

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

const CarouselCardItem = ({ item, index }) => {
  const navigation = useNavigation(); // 组件顶层调用Hook，符合规则
  return (
    <Pressable onPress={() => {
      // 按你的业务逻辑跳转，item里可以存跳转目标路由名、参数等
      navigation.navigate(item.targetPage, item.navigateParams || {});
    }}>
      <View style={styles.container} key={index}>
        <Image source={{ uri: item.imgUrl }} style={styles.image} />
      </View>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  // 补充你自己的样式定义
  container: {
    width: ITEM_WIDTH
  },
  image: {
    width: "100%",
    height: 200,
    resizeMode: "cover"
  }
})

export default CarouselCardItem;

第三步：正确调用轮播组件 #

在你的页面组件中按如下方式调用，确保页面在导航栈内：

// 页面组件代码示例
import React from "react";
import { View } from "react-native";
import CarouselCards from "./CarouselCards";
import CarouselCardItem from "./CarouselCardItem";

const HomePage = () => {
  // 你的轮播数据，可自定义跳转路由、参数
  const carouselData = [
    {
      imgUrl: "xxx",
      targetPage: "Detail",
      navigateParams: { id: 1 }
    },
    {
      imgUrl: "yyy",
      targetPage: "Activity",
      navigateParams: { id: 2 }
    }
  ]

  return (
    <View>
      <CarouselCards
        data={carouselData}
        renderItem={({item, index}) => <CarouselCardItem item={item} index={index} />} // 传入渲染函数
        autoplay
        loop
      />
    </View>
  )
}

export default HomePage;

• 确保整个轮播组件的父级外层有NavigationContainer包裹，否则useNavigation无法获取上下文
• 所有Hook必须在函数组件的顶层调用，不能在条件判断、循环、回调函数内部调用

内容的提问来源于stack exchange，提问作者abdemirza