React-Native SectionList прокрутить до элемента вне поля зрения на Android - PullRequest
Новая
       23

React-Native SectionList прокрутить до элемента вне поля зрения на Android

10 голосов
/ 01 июня 2019

Для проекта, над которым я работаю, мне нужно создать компонент, в котором пользователи могут добавлять записи в массив, который находится в состоянии, и SectionList для отображения этих записей.Кроме того, мне нужно, чтобы SectionList прокручивал вниз до последней записи сразу после ее ввода. Пожалуйста, проверьте этот перекус для примера

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

Я перепробовал множество вещей, включая ожидание setState, определение contentContainerStyle, преобразование всего этого в VirtualizedList и ScrollView, всеЯ могу думать, но я просто не могу заставить его прокрутить до последней записи.

Вопрос: Как я могу получить мой SectionList для прокрутки до последнего элемента, который в настоящее времяза пределами компонента SectionList?

UPDATE Я знаю, что эта проблема вызвана тем, что SectionList еще не содержит элемент при вызове scrollToLocation.Кажется, ключом к решению является ожидание повторного рендеринга списка

UPDATE 2 SetState имеет обратный вызов, который также не решает эту проблему.Однако решение в этом комментарии работает.Проблема в том, что он работает только в файлах .js, и я работаю с файлами .tsx по всему проекту.Как я мог преодолеть это?

Ответы [ 2 ]

1 голос
/ 10 июня 2019

Видимо, это ошибка в React-Native 0.59.6.

На андроиде при работе в блоке завершения setState необходимо установить тайм-аут на 0,2 секунды, и после этого SectionList будет прокручиваться до конца. Тем не менее, элемент, который должен быть там, еще не визуализирован и иногда появляется через 0,5 секунды, что приводит к действительно неуклюжему ощущению.

Я опубликовал проблему Здесь , и надеюсь, что она будет исправлена ​​в ближайшее время

0 голосов
/ 09 июня 2019

Я думаю, что проблема намного проще и связана с вашим стилем.

Вы просите список иметь height: Dimensions.get('window').height - 50, но эта строка ничего не делает, поскольку вы не можете зафиксировать высоту SectionList.

Таким образом, вы можете удалить его и добавить поле вместо: 

list: {
  top: 50,
  marginBottom: 50,
},
...