Блог

Главная - Вопросы по программированию - Как вы отображаете ограниченное содержимое в режиме прокрутки?

Как вы отображаете ограниченное содержимое в режиме прокрутки?

#reactjs #react-native

#reactjs #react-native

Вопрос:

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

В Твиттере я вижу, что они отображают, скажем, ~ 50 твитов, затем, когда вы дойдете до конца и потянете, он покажет ActivityIndicator, а затем отобразит дополнительные 50 твитов

Как вы получаете такое поведение в React Native?

Комментарии:

1. В принципе, вы должны использовать onEndReached with onEndReachedThreshold , когда scroll get закрывается до нижней части экрана, вызывается обратный вызов, поэтому вам нужно обработать всю логику в обратном вызове, чтобы получить больше результатов от api. facebook.github.io/react-native/docs/flatlist#onendreached

Ответ №1:

Это довольно простое решение, называемое отложенной загрузкой.

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

Способ работы приложения Twitter:

  1. При первом отображении компонента извлекается первая страница
  2. Каждый раз, когда пользователь попадает в конец списка (и отображается индикатор загрузки), выбирается и отображается следующая страница (из конечной точки API, упомянутой выше).

В React Native вы можете добиться этого с помощью <Flatlist /> компонента. У него есть поддержка onEndReached, которая позволит вам создать такое поведение. Вы также можете использовать onEndReachedThreshold, чтобы контролировать, когда происходит выборка следующей страницы. Оба реквизита очень хорошо документированы.

Вам решать, сколько транзакций на каждой странице, но вы должны быть в безопасности с 50.

Ответ №2:

Такого поведения можно легко добиться с помощью flatlist. В onEndReached вызывается prop, который вызывается, когда пользователь достигает конца списка. В принципе, вы можете использовать api в этом обратном вызове, чтобы получить больше результатов и добавить эти данные в список, и это автоматически обновит ваш список новыми данными.

 <FlatList
data={data} //coming from state or redux
onEndReached={() => this.getMoreData()}
/>

const getMoreData=()=>{
 //in this function hit the api and append the data to the existing list
}