React Native Carousel的firstItem属性无法随props动态更新

• 你所用的Carousel组件（react-native-snap-carousel）的firstItem属性为组件初始化阶段才会读取的非受控属性，组件完成挂载后，该属性的后续更新不会触发组件内部的激活项索引变更，属于组件本身的设计特性，并非props传值异常。
• 代码中给Carousel设置了固定值key={3}，当父组件传入的selectedPinkItemIndex更新时，React不会销毁重建当前Carousel实例，会一直复用组件初始化时读取到的firstItem=0的状态，因此始终停留在第0项。
• 现有firstItem的判断逻辑存在小瑕疵：props.selectedPinkItemIndex ? props.selectedPinkItemIndex : 0把合法索引0判定为falsy值，虽然当前场景下结果符合预期，但遇到边界值时容易出现异常。

两种方案按需选择即可：

方案1：绑定动态key强制组件重建（实现成本最低） #

将固定key替换为与选中索引绑定的动态值，当selectedPinkItemIndex变化时，key的变更会触发React卸载旧的Carousel实例，使用新的firstItem值重新挂载组件，直接定位到目标项：

<Carousel
  key={`picklist-carousel-${props.selectedPinkItemIndex}`}
  sliderWidth={device.windowWidth}
  sliderHeight={device.windowHeight}
  activeSlideAlignment="start"
  itemWidth={device.windowWidth - 20}
  data={picklistItems}
  // 用空值合并运算符替代三元判断，仅在值为null/undefined时取默认值0，避免索引0被误判
  firstItem={props.selectedPinkItemIndex ?? 0}
  scrollEnabled={true}
  pointerEvents={'none'}
  lockScrollWhileSnapping
/>

方案2：调用组件实例方法跳转（性能更优，适合索引频繁更新场景） #

如果不希望每次索引变更都重建组件，可以通过ref获取Carousel实例，监听选中索引变化时主动调用组件内置的跳转方法切换激活项：

import { useRef, useEffect } from 'react';
import Carousel from 'react-native-snap-carousel';

// 业务组件内部声明ref
const carouselRef = useRef<Carousel>(null);

// 监听props传入的选中索引变化，主动触发跳转
useEffect(() => {
  if (carouselRef.current && typeof props.selectedPinkItemIndex === 'number') {
    // snapToItem参数依次为：目标索引、是否启用跳转动画、跳转完成回调
    carouselRef.current.snapToItem(props.selectedPinkItemIndex, true);
  }
}, [props.selectedPinkItemIndex]);

// Carousel组件绑定ref
<Carousel
  ref={carouselRef}
  sliderWidth={device.windowWidth}
  sliderHeight={device.windowHeight}
  activeSlideAlignment="start"
  itemWidth={device.windowWidth - 20}
  data={picklistItems}
  firstItem={0}
  scrollEnabled={true}
  pointerEvents={'none'}
  lockScrollWhileSnapping
/>

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