Question

我有一个像这样的ScrollView：

        <ScrollView>
          {this.state.businessMerchants.map(merchant => (
            <Business
              merchant={merchant}
              key={merchant.id}
            />
          ))}
        </ScrollView>

通常其中包含2-4个项目。

我想突出显示当前的最高项目，并使其占用更多空间（也许再增加10％？）。滚动列表时，此“顶部项目”将切换。

是否有更标准化的方法来执行此操作，还是我必须做一些诸如使用scrollEventThrottle和自定义函数之类的事情？

下面的伪代码：

if((findHeightOfItem + padding) * multiple === itemPos) {
addSizeHere()
}

对于在React Native中执行此操作的最佳/最有效方式是非常好奇的。

Answer 1

步骤：

确定每个组件itemHeight的高度
应用onScroll并获取当前滚动高度scrolledHeight
具有一个称为currentItemIndex的局部状态，该状态将在onScroll函数中确定，并将被计算为Math.floor(scrolledHeight / itemHeight)
发送isCurrentItem作为业务组件的支持
根据布尔值isCurrentItem的值将必要的样式应用于业务组件

我建议您使用带有缩放比例的动画视图

handleScroll = (e) => {
  const currentHeight = e.nativeEvent.contentOffset.y;
  const currentItemIndex = Math.floor(currentHeight / 100);
  this.setState({ currentItemIndex });
}

<ScrollView onScroll>
  {this.state.businessMerchants.map((merchant, index) => (
    <Business
      merchant={merchant}
      isCurrentItem={index === this.state.currentItemIndex}
      key={merchant.id}
    />
  ))}
</ScrollView>

在React Native ScrollView中扩大单个项目

1 个答案: