React Native Expo VirtualizedList, как использовать метод scrollToEnd?

Я пытаюсь использовать метод scrollToEnd() в VirtualizedList. Но что интересно, я не могу найти в Интернете ни одного примера, объясняющего, как использовать методы с VirtualizedList.

Я пытался использовать его, как показано ниже, но, очевидно, это не сработало.

<VirtualizedList
          data = {serverData}
          initialNumToRender = {4}
          renderItem = {renderItem}
          keyExtractor = {item => item.id.toString()}
          getItemCount = {getItemCount}
          getItem = {getItem}
          ListFooterComponent = {renderFooter}
          scrollToEnd = {{ animated: true }}
        />  

проверить новое решение

BYIRINGIRO Emmanuel 19.03.2022 00:09
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
32
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

VirtualizedListвыставлять scrollToEnd метод, а не реквизит. Вы должны использовать React Ref для доступа к нему.

const listRef = React.useRef(null)

// Scroll to list end - Call this function after add new items to list for example
const scrollToListEnd = ()=> listRef.current?.scrollToEnd({ animated: true })

<VirtualizedList
  data = {serverData}
  initialNumToRender = {4}
  renderItem = {renderItem}
  keyExtractor = {(item) => item.id.toString()}
  getItemCount = {getItemCount}
  getItem = {getItem}
  ListFooterComponent = {renderFooter}
  ref = {listRef}
/>;


Этот не работает

Lonare 19.03.2022 00:48
Ответ принят как подходящий

Функция scrollToEnd наследуется от ScrollView посредством VirtualizedList. Это функция, а не реквизит.

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


const listRef = useRef(null);

<VirtualizedList
    ref= {listRef}
    onContentSizeChange= {()=> listRef.current.scrollToEnd()} 
/> 

Приведенный выше код прокручивается до конца списка при изменении размера содержимого его данных. Однако вы можете вызывать функцию scrollToEnd в любое время.

Другие вопросы по теме