Увеличение одного элемента в React Native 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()
}

Довольно любопытно, как лучше / эффективнее всего сделать это в React Native.

Answer 1

Шаги:

• Определить высоту каждого компонента itemHeight
• Применить onScroll и получить текущую высоту прокрутки scrolledHeight
• Иметь одно локальное состояние с именемcurrentItemIndex, который будет определен в функции onScroll и будет рассчитан как Math.floor(scrolledHeight / itemHeight)
• Отправить isCurrentItem в качестве реквизита для компонента Business
• Применить необходимые стили к компоненту Business в зависимости от значения логического значения 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>