Как сделать «закладки» в FlatList?

Question

[pcdesign]

Есть приложение - сборник цитат.
Юзер читает цитаты Сократа. Например, остановился на 101-ой цитате из 800.
Как ему повесить закладку на то место где он остановился, чтобы не начинать чтение с нуля?

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

Я понимаю, что с помощью AsyncStorage можно хранить ID цитаты на которой юзер ткнул в "закладки".
Но как промотать до этой самой нужной закладки?

Answer 1

[Роман Александрович]

в документации к FlatList есть методы
scrollToEnd
scrollToIndex
scrollToItem
scrollToOffset
с помощью которых вы можете реализовать закладки и тп.
https://facebook.github.io/react-native/docs/flatlist

Comments

[pcdesign]

Здравствуйте.
Спасибо за ответ.
Я вот попытался, что-то накидать:
https://snack.expo.io/@aimodding/flatlist-scrolltoindex

Не могу понять как быть с getItemLayout, ведь размер цитат не фиксированный. Есть длинные цитаты, есть короткие.
И на ваш взгляд по этому коду я на правильном пути? Или иду не туда :)

[Роман Александрович]

pcdesign, у меня была такая проблема и я поступил так: при прокрутки списка я смотрю считываю offset и когда пользователь например проволился в итем и решил вернуться обратно я отображаю список и с помощью scrollToOffset прокручиваю список на offset  который был. я уверен что есть другие методы как это правильно делать и еще и проще но на тот момент это работало без нареканий но я думаю что правильнее было бы использовать scrollToIndex scrollToItem.
еще вы можете сделать все цитаты одного размера. Показать начало цитаты и ... а при нажатии на цитату провалиться в итем и там показать всю цитату.
Вы на правильном пути продолжайте в этом направлении.

[pcdesign]

Роман Александрович, вот такие у меня "исследования" :)

при прокрутки списка я смотрю считываю offset ...

В этом случае, получается все сломается, если юзер повернет экран с вертикального на горизонтальный.
Верно?

Обрезать цитаты я бы не хотел, это неудобно для юзеров, лишние движения. А без жесткой фиксации размера item-а и getItemLayout не работает scrollToIndex.

Пока дошел до следующего.

_onViewableItemsChanged = ({ viewableItems, changed }) => {
    console.log('Visible items are', viewableItems);
    console.log('Changed in this iteration', changed);
  };

<FlatList
            onViewableItemsChanged={this._onViewableItemsChanged}

С помощью этой штуки отслеживаю текущий index, до которого докрутил юзер.
А дальше initialScrollIndex={index_до_которого_докрутил_юзер}
Но в этом случае другая засада. Если юзер скролит, его выбрасывает на самое начало списка.
Непонятно как это побеждать.

[Роман Александрович]

pcdesign,ну в моем случае я запретил поворот приложения на горизонтальный вид. Но можно для считывать какой в данный момент вид и для каждого запомнить свой оффсет.
https://github.com/yamill/react-native-orientation

[pcdesign]

Роман Александрович, Спасибо за ответ. Например, у юзера вертикальный экран и я знаю текущий offset. Этот модуль поможет мне узнать какой будет offset если он повернёт экран на горизонт?

[Роман Александрович]

pcdesign, я не проверял но думаю что должен подсказать правильно .