numColumns breaks scrollToIndex реагирует на родной FlatList

Question

Я использую реагирующий нативный FlatList , чтобы отобразить список элементов, а также проверить, какие элементы в настоящее время доступны для просмотра. В моих элементах есть один элемент, помеченный mostUsed, если элемент не отображается, я отображаю ссылку вверху, пользователь может щелкнуть по нему и прокрутить до этого элемента, используя scrollToIndex. scrollToIndex хорошо работает без установки numColumns, когда я устанавливаю numColumns={2}, я получаю scrollToIndex out of range: 9 vs 4 ошибку.

setScrollIndex = () => {
  if (this.state.scrollIndex !== 0) {
    return;
  }

  for (let i = 0; i < this.state.items.length; i++) {
    const items = this.state.items;

      if (items[i] && items[i].mostUsed) {
        this.setState({
          scrollIndex: i,
        });
      }
  }
};

// scroll to index function
scrollToIndex = () => {
  this.flatListRef.scrollToIndex({
    animated: true,
    index: this.state.scrollIndex,
  });
};

<FlatList
  data={this.state.items}
  numColumns={2}
  keyExtractor={(item, index) => index.toString()}
  ref={ref => {
    this.flatListRef = ref;
  }}
  showsVerticalScrollIndicator={false}
  onViewableItemsChanged={this.handleViewableItemsChanged}
  viewabilityConfig={this.viewabilityConfig}
  renderItem={({ item, index }) => (
    <Card  
      title={item.title}
      description={item.description}
      mostUsed={item.mostUsed}
      style={{ width: item.width }}
    />
  )}
/>

Экспо-закуска

Answer 1

Похоже, что FlatList scrollToIndex меняет способ просмотра индекса, если numColumns выше, чем 1.

Может быть правильнее назвать его scrollToRowIndex, поскольку он не работаетна индекс предмета в случае нескольких столбцов.

В вашем случае это сработало для меня на выставке:

scrollToIndex = () => {
  this.flatListRef.scrollToIndex({
    animated: true,
    index: Math.floor(this.state.scrollIndex / numColumns),
  });
};