FlatList React-Native: как сфокусировать прокрутку в определенном элементе списка

Question

Контекст:

Привет, ребята, я работаю с «Reaction-native», используя «expo», и у меня есть инвертированный «FlatList», где он отображает «массив»месяцы с января по декабрь.

Запрос:

До того, как список будет показан пользователюсписок должен фокусироваться в текущем месяце.

Текущая ситуация:

Я использую свойство «FlatList» «scrollToOffset» для выполнения этого запроса, когда списокПри получении «источника данных» автоматически запускается оператор «this.flatList.scrollToOffset», а список анимирует прокрутку и фокусирует конкретный элемент.Однако у меня есть проблема, эта анимация - резкое движение, которое портит UX.

Необходимость:

Можете ли вы помочь мне найти решение этой проблемы?Мне нужно сделать то же самое, но пользователь не может видеть это движение прокрутки, он должен только видеть объект в фокусе.Есть идеи?

Код демонстрации:

Плоский список

<FlatList
  ref={ref => (this.flatList = ref)}
  inverted
  data={foods}
  keyExtractor={this.keyExtractor}
  renderItem={this.renderItem}
/>

Функция для фокусировки элемента

handlePosition(id) {
  /* Item Size from FlatList */
  const itemSize = deviceWidth / 2 + 30;
  /* Id of the current month */
  const idCurrentItem = id;

  this.flatList.scrollToOffset({
    animated: true,
    offset: itemSize * idCurrentItem,
  });
}

оператор гдевызвать функцию handlePosition

componentDidMount() {
  this.handlePosition(this.props.months[2].id);
}

Answer 1

Используйте команду initialScrollIndex компонента FlatList, чтобы упорядочить индекс, в котором вы хотите запустить FlatList.

Для этого вы должны вычислить месяц до рендеринга в функциях componentDidMount или componentWillMount, где выпридется хранить месяц (или индекс) в состоянии.Затем вы получите доступ к этому состоянию в компоненте Flatlist и установите для него initialscrollIndex.

Вот пример функции componentWillMount:

componentWillMount() {
...
  //assuming that we are on February will set index scroll to 1 being 0 January 
  //and being 3 March
  this.setState({monthToStart: 1});
}

Необходимая инструкция для успешной работы initialScrollIndex

getItemLayout(data, index) {
  return (
    {
      length: yourItemHeightSize,
      offset: yourItemHeightSize * index,
      index
    }    
  );
}

Вот пример компонента FlatList, добавляющего новую пропу:

  <FlatList
    ref={ref => (this.flatList = ref)}
    inverted
    data={foods}
    keyExtractor={this.keyExtractor}
    getItemLayout={(data, index) => this.getItemLayout(data, index)}
    renderItem={this.renderItem}
    initialScrollIndex={this.state.monthToStart}
  />