对滚动跳转索引做出原生反应

Question

我正在用滚动方式创建一个原生反应平面列表。 我的列表中有 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>
      )}

您能检查一下我做错了什么并请帮忙吗？

Answer 1

我设法找到了解决方案。因此，卡片的尺寸更大，这意味着指示器滚动根据我的逻辑滚动时会占据项目的间距。

所以我必须更新间距大小以适应卡片尺寸并滚动整个列表

const updateIndex = (事件) => { const contentOffsetX = event.nativeEvent.contentOffset.x viewModel.updateIndex(contentOffsetX, cardWidth, Spacings.Cozy)//spacing.cozy 等于 24，必须将其增加 180 才能工作

}