在 React Native ScrollView 中放大单个项目

Question

我有一个像这样的 ScrollView:

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

通常有 2-4 个项目。

我想突出显示当前的顶部项目并使其占用更多空间（也许多 10%？）。这个 "top item" 会随着列表的滚动而切换。

是否有更标准化的方法来执行此操作，或者我是否必须执行类似使用 scrollEventThrottle 和自定义函数这样的操作？

伪代码如下：

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

很好奇在 React Native 中执行此操作的 best/most 执行方式是什么。

Answer 1

步骤：

决定每个组件的高度itemHeight
应用onScroll并获取当前滚动高度scrolledHeight
有一个名为 currentItemIndex 的本地状态，它将在 onScroll 函数中确定，并将计算为 Math.floor(scrolledHeight / itemHeight)
将 isCurrentItem 作为 prop 发送到业务组件
根据布尔值 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 中放大单个项目

Enlarging single item in React Native ScrollView

javascript

scrollview

react-native