react-native-reanimated-carousel编程切换轮播项及useCarouselController导入问题

useCarouselController 其实是和 Carousel 组件一同从 react-native-reanimated-carousel 库中导出的，你只需要补充导入语句即可：

import { Carousel, useCarouselController } from 'react-native-reanimated-carousel';

以下是完整的可运行示例，涵盖初始化控制器、关联轮播组件、调用切换方法的全流程：

import React from 'react';
import { View, Button, Text } from 'react-native';
import { Carousel, useCarouselController } from 'react-native-reanimated-carousel';

const CustomCarousel = () => {
  // 初始化轮播控制器
  const carouselController = useCarouselController();
  const { next, previous, scrollToIndex } = carouselController;

  // 模拟轮播数据源
  const carouselData = Array.from({ length: 6 }).map((_, idx) => ({
    id: idx,
    label: `轮播项 ${idx + 1}`
  }));

  return (
    <View style={{ flex: 1 }}>
      <Carousel
        data={carouselData}
        defaultIndex={2}
        carouselController={carouselController}
        renderItem={({ item }) => (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', marginHorizontal: 10 }}>
            <Text style={{ fontSize: 20 }}>{item.label}</Text>
          </View>
        )}
      />
      <View style={{ flexDirection: 'row', justifyContent: 'space-around', paddingVertical: 20 }}>
        <Button title="上一项" onPress={previous} />
        <Button title="下一项" onPress={next} />
        <Button title="跳转到第3项" onPress={() => scrollToIndex({ index: 2 })} />
      </View>
    </View>
  );
};

export default CustomCarousel;

核心注意事项： #

• 确保你的 react-native-reanimated-carousel 版本在 v3.x 及以上，该钩子是在较新版本中新增的功能
• 必须通过 carouselController 属性将控制器实例传递给 Carousel 组件，否则无法建立控制关联
• scrollToIndex 方法支持直接跳转指定索引，可选配置 animated 参数控制是否启用动画切换

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