在React本地ScrollView中放大单个项

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()
}

非常好奇什么是最好的/最具表现力的方式，在反应本地人。

Answer 1

步骤：

决定每个组件itemHeight

• Apply onScroll的高度，得到当前滚动的高度scrolledHeight

• Have，一个称为currentItemIndex的本地状态，它将在onScroll函数中决定，并将被计算为Math.floor(scrolledHeight / itemHeight)

• Send isCurrentItem作为业务组件的支柱，所需样式取决于布尔isCurrentItem

• I的值，这将建议您使用带有转换比例的动画视图

handleScroll = (e) => { const currentHeight = e.nativeEvent.contentOffset.y；const currentItemIndex = Math.floor(currentHeight / 100)；this.setState({ currentItemIndex })；}{this.state.businessMerchants.map(商户，索引) => ( )}