Реагировать на собственный ScrollView сбрасывает положение на setState - PullRequest
Новая
       47

Реагировать на собственный ScrollView сбрасывает положение на setState

0 голосов
/ 18 апреля 2020

У меня есть ScrollView с кнопками на нем. Я населяю ScrollView динамически. После того, как я нажимаю на кнопки внутри ScrollView, я изменяю состояние текущего выбранного индекса, а положение ScrollView сбрасывается. 

<ScrollView
  ref={ref => {
    this._scrollview = ref;
  }}
  style={styles.scrollview}
  horizontal
  showsHorizontalScrollIndicator={false}
  snapToInterval={64}
  snapToAlignment="start"
  decelerationRate="fast"
  contentContainerStyle={{ paddingRight: 8, paddingLeft: 8 }}>
    {this._channels.map((item, index) =>
      <TouchableWithoutFeedback
        onLayout={event => {
          const layout = event.nativeEvent.layout;
          this._channelsPositions[index] = layout.x;
        }}
        key={item.userId}
        onPress={() => this._changeIndex(index)}>

        <Image
          source={{ uri: videos[index][0].channelThumbnails.high.url }}
          style={[styles.channelLogo, index == this.state.currentIndex ? { borderWidth: 2 } : {}]}
        />
      </TouchableWithoutFeedback>
    )}
</ScrollView>

_changeIndex = (newIndex: number) => {
  const { currentIndex } = this.state;
  if (newIndex == currentIndex) return;

  this.setState({
    currentIndex: newIndex
  });

  const newX = 16 + 48 * newIndex
  this._scrollview.scrollTo({
    x: 16 + 48 * newIndex,
    y: 0,
    animated: true
  })
}

И после нажатия кнопки я хочу ScrollView для перемещения в x положение этой кнопки внутри ScrollView. Демонстрация: https://streamable.com/gu1edy

Обновление: После того, как я заменяю scrollview на Flatlist в заголовке, я думаю, я понимаю, почему это происходит. Но я все еще не знаю, как это исправить. Таким образом, поведение такое же, я получаю сброс прокрутки каждый раз, когда я нажимаю на кнопку / ячейку / элемент scrollview / flatlist. Как выглядит мой плоский список с вложенным плоским списком в заголовке 

\ |CHANNEL ICON 0|CHANNEL ICON 1|CHANNEL ICON 2| ... \     header with flatlist         

\ FIRST ITEM IN FLATLIST WHICH CONTAINS VIDEO OF CHANNEL\  cell 0
\ SECOND ITEM IN FLATLIST WHICH CONTAINS VIDEO OF CHANNEL\ cell 1

...

Так что после того, как я щелкну по значку канала, все основные списки заполнятся новыми данными, так что, если я правильно понимаю, перерисовка заголовка и Переполняется новыми данными тоже. Так есть ли возможность обновить заголовок с помощью flatlist таким образом, чтобы моя прокрутка в заголовке оставалась на своей позиции без сброса?

...