我正在 React Native 中创建一个带有 on scroll 的 flatlist。我的列表中有 9 个项目，我还使用指示器滚动浏览这 9 个项目。现在，指示器滚动速度很快，完成速度也很快……

我正在 React Native 中创建一个带有 on scroll 的 flatlist。我的列表中有 9 个项目，我还使用指示器滚动浏览这 9 个项目。现在，指示器滚动得很快，在我们到达项目末尾之前就很快完成了。就像当项目位于第 5 位时它到达末尾一样，所以它不一致。我希望它能够一致地逐个项目滚动。

下面是我的代码：viewModel.ts：

 @observable currentIndex: number = 0
 actionCardsData = [
    {
      id: "1",
      icon: "coin",
      text: "rewards.exploreHomeReward",
      desciption: "rewards.homeofRewardsDescription",
    },
    {
      id: "2",
      icon: "handIconRewards",
      text: "rewards.guaranteedRewardsTitle",
      desciption: "rewards.guaranteedRewardsDescription",
    },
    {
      id: "3",
      icon: "iconHeartFillRewards",
      text: "rewards.annualBirthdaydRewardsTitle",
      desciption: "rewards.annualBirthdaydRewardsDescription",
    },
    {
      id: "4",
      icon: "buyCartsIconRewards",
      text: "rewards.uberEatsVouchersRewardsTitle",
      desciption: "rewards.uberEatsVouchersRewardsDescription",
    },
    {
      id: "5",
      icon: "benefitsCompetitionsIconRewards",
      text: "rewards.competitionEntriesRewardsTitle",
      desciption: "rewards.competitionEntriesRewardsDescription",
    },
    {
      id: "6",
      icon: "boxOfficeIconRewards",
      text: "rewards.boxOfficeRentalRewardsTitle",
      desciption: "rewards.boxOfficeRentalRewardsDescription",
    },
    {
      id: "7",
      icon: "upgradePackageRewards",
      text: "rewards.packageUpgradesRewardsTitle",
      desciption: "rewards.packageUpgradesRewardsDescription",
    },
    {
      id: "8",
      icon: "newShowmaxIcon",
      text: "rewards.showmaxDiscountsRewardsTitle",
      desciption: "rewards.showmaxDiscountsRewardsDescription",
    },
    {
      id: "9",
      icon: "addMoviesIconsRewards",
      text: "rewards.boxOfficeRentalRewardsTitle",
      desciption: "rewards.movieAddOnDiscountsRewardsDescription",
    },
  ]
 @action.bound
  setCurrentIndex(index: number) {
    this.currentIndex = index
  }

  @action.bound
  updateIndex(contentOffsetX: number, cardWidth: number, spacing: number) {
    let newIndex = Math.round(contentOffsetX / (cardWidth + spacing))
    this.setCurrentIndex(Math.min(newIndex, this.actionCardsData.length - 1))
  }

我的索引.tsx：

const visibleIndicators = (currentIndex) => {
    const maxIndicators =
      viewModel.actionCardsData.length > 9 ? 9 : viewModel.actionCardsData.length
    let start = Math.max(0, currentIndex - Math.floor(maxIndicators / 2))
    const end = Math.min(viewModel.actionCardsData.length, start + maxIndicators)
    start = Math.max(0, end - maxIndicators)
    return Array.from({ length: end - start }, (_, i) => start + i).map(renderIndicator)
  }
  const updateIndex = (event) => {
    const contentOffsetX = event.nativeEvent.contentOffset.x
    viewModel.updateIndex(contentOffsetX, cardWidth, Spacings.Cozy)
    
  }
<FlatList
        data={viewModel.actionCardsData}
        renderItem={renderItem}
        showsHorizontalScrollIndicator={false}
        decelerationRate="fast"
        contentContainerStyle={styles.contentContainer}
        onScroll={updateIndex}
        horizontal
        snapToInterval={cardWidth + Spacings.Roomy}
        ItemSeparatorComponent={() => <View style={{ width: Spacings.Cozy }} />}
      />
      {viewModel.actionCardsData.length > 2 && (
        <View style={styles.indicatorContainer}>{visibleIndicators(viewModel.currentIndex)}</View>
      )}

你能检查一下我做错了什么并提供帮助吗？