recyclerlistview
Version 4.2.1
Если этот проект вам помог, пожалуйста, поддержите нас звездой?
Это высокопроизводительный список для React Native и Web с поддержкой сложных макетов. JS только без нативных зависимостей, вдохновленных как Recyclerview на Android, так и UicollectionView на iOS.
npm install --save recyclerlistview
Для последней бета -версии:
npm install --save recyclerlistview@beta
ПРИМЕЧАНИЕ. Документация будет обновлена в ближайшее время, на данный момент проверьте комментарии кода для ясности и изучения функций. Этот компонент активно протестирован и с помощью Native Web React.
RecyclerListView использует «утилизацию ячеек» для повторного использования представлений, которые больше не видны для рендеринга элементов вместо создания новых объектов представления. Создание объектов очень дорого и поставляется с накладными расходами на память, что означает, что при прокрутке списка следы памяти продолжают подниматься. Выпуск невидимых элементов из памяти - это еще одна техника, но это приводит к созданию еще большего количества объектов и множества коллекций мусора. Утилизация - лучший способ отображать бесконечные списки, которые не ставят под угрозу производительность или эффективность памяти.
Помимо всех преимуществ производительности recyclerlistView с отличными функциями из коробки:
forceNonDeterministicRendering )RecyclerListView был построен с учетом производительности, что означает отсутствие пробелов, в то время как быстрые свитки или кадры падают. RecyclerListView поощряет вас иметь детерминированные высоты для предметов, которые вам необходимы. Это не означает, что вам нужно иметь все элементы одинаковой высоты и прочего, все, что вам нужно, - это способ взглянуть на данные и вычислить высоту заранее, чтобы RecyclerListView могла вычислить макет за один проход, а не ждать, пока произойдет розыгрыш. Вы по -прежнему можете делать всевозможные сетки и обзоры списков с различными типами предметов, которые все переработаны оптимальными способами. Рециркуляция на основе типа очень легко сделать и выходить из коробки.
В случае, если вы не можете заранее определить высоты элементов, просто установите forceNonDeterministicRendering Prop на True на RecyclerListView. Теперь он будет относиться к данным измерениям как оценки и позволит элементам изменить размер. Постарайтесь дать хорошие оценки, чтобы улучшить опыт.
Производственное продуктовое видео Flipkart (или попробуйте приложение): https://youtu.be/6yqeqp3mmou
Бесконечная загрузка/просмотр изменения (Expo): https://snack.expo.io/@naqvitalha/rlv-demo
Mixed ViewTypes: https://snack.expo.io/b1gyad52b
ExtendedState, StableIds и IteManimator (Expo): https://snack.expo.io/@arunreddy10/19bb8e
Образец проекта: https://github.com/naqvitalha/travelmate
Веб-образец (с использованием RNW): https://codesandbox.io/s/k54j2zx977, https://jolly-engelbart-8ff0d0.netlify.com/
Пример сохранения контекста: https://github.com/naqvitalha/recyclerlistview-context-preservation-demo
Другое видео: https://www.youtube.com/watch?v=tnv4hmmpgmc
| Проп | Необходимый | Тип параметров | Описание |
|---|---|---|---|
| MayoutProvider | Да | BaselayoutProvider | Функция конструктора, которая определяет макет (высота / ширина) каждого элемента |
| DataProvider | Да | DataProvider | Функция конструктора Определяет данные для каждого элемента |
| контекст -провален | Нет | Контекст -провален | Используется для поддержания позиции прокрутки в случае, если будет разрушено представление, что часто случается с навигацией на заднем плане |
| Rowrenderer | Да | (Тип: строка | номер, данные: any, index: number) => jsx.element | JSX.Element [] | нулевой | Метод, который возвращает компонент реагирования, будет отображаться. Вы получаете тип, данные, индекс и расширенное положение представления в обратном вызове |
| начальный оффсет | Нет | число | Первоначальное смещение вы хотите начать рендеринг; Это очень полезно, если вы хотите поддерживать контекст прокрутки на страницах. |
| renderaheadoffset | Нет | число | Укажите, сколько пикселей заранее вы хотите, чтобы представления были представлены. Увеличение этого значения может помочь уменьшить пробелы (если таковые имеются). Тем не менее, поддержание этого намерения должно быть намерением. Более высокие значения также увеличивают вычисление повторного рендеринга |
| Игоризонтальный | Нет | логический | Если это правда, список будет работать горизонтально, а не вертикально |
| onscroll | Нет | RAWEVENT: Scrollevent, OffSetx: номер, offsety: number) => void | В функции обратного вызова прокрутки, которая выполняется как пользовательские свитки |
| onrecreate | Нет | (params: onrecreateparams) => void | Функция обратного вызова, которая выполняется при воссоздании представления переработчика от поставщика контекста |
| externalscrollview | Нет | {new (ops: scrollviewdefaultprops): basescrollview} | Используйте это, чтобы пройти вашу реализацию Basescrollview |
| OnendrieChed | Нет | () => void | Функция обратного вызова выполнена при достижении конца представления (минус на оформлении, если определено) |
| OnenDrieChedThreshold | Нет | число | Укажите, сколько пикселей заранее для обратного вызова |
| OnenDrieChedThresholdRelative | Нет | число | Укажите, как далеко от конца (в единицах видимой длины списка) нижний край списка должен быть от конца контента, чтобы вызвать обратный вызов OnenDrieched |
| onvisibleindiceschanged | Нет | TonitemStatusChanged | Обеспечивает видимый индекс; Полезнен в отправке событий от впечатления |
| onvisibleIndexEschanged | Нет | TonitemStatusChanged | (Устаревшая в 2,0 бета) обеспечивает видимый индекс; Полезнен в отправке событий от впечатления |
| renderfooter | Нет | () => Jsx.element | JSX.Element [] | нулевой | Предоставьте этот метод, если вы хотите отображать нижний колонтитул. Полезно показывать погрузчик при дополнительных нагрузках |
| initordrenderindex | Нет | число | Укажите начальный индекс элементов, с которого вы хотите, чтобы рендеринг начал. Предпочтительнее, чем на initioroffset, если оба указаны |
| Прокрутка | Нет | число | Только iOS; Прокрутите длительность дроссельной заслонки |
| CanChangesize | Нет | логический | Укажите, может ли размер измениться |
| Расстояние от времени | Нет | число | (Депрессифицирован) Используйте applyWindowCorrection() API с windowShift . Использование? |
| Применить WindowCorrection | Нет | (смещение: номер, WindowCorrection: WindowCorrection) => void | (Улучшение/замена до API distanceFromWindow API) позволяет обновлять видимые привязки к окнам на основе передаваемых значений коррекции. Пользователь может указать Windowshift ; В случае, если весь RecyclerListWindow должен сдвинуться вниз/вверх, StartCorrection ; В случае, если привязки к верхнему окну необходимо сдвинуть для бывшего верхнего окна, связанного с смещением, представляет собой содержание, перекрывающее верхний край recyclerListView, EndCorrection : Чтобы изменить нижнее окно, связанное с аналогичным вариантом использования. Использование? |
| USEWINDOWSCROLL | Нет | логический | Только в Интернете; Элементы макета в окне вместо прокручиваемого Div |
| DivableRecycling | Нет | логический | Отключает переработку |
| forcenondeterministringrendering | Нет | логический | По умолчанию неверно; Если включенные размеры, представленные в поставщике макетов, не будут строго соблюдаются. Используйте это, если размеры элементов не могут быть точно определены |
| Расширенная штат | Нет | объект | В некоторых случаях данные, передаваемые на уровне строк, могут не содержать всю информацию, от которой зависит элемент, вы можете сохранить всю другую информацию снаружи и передавать ее через эту опору. Изменение этого объекта заставит все повторно рендеринг. Убедитесь, что вы не меняете его часто, чтобы обеспечить производительность. Повторные рестораны тяжелые. |
| иманаматор | Нет | Иманаматор | Включает анимирующие ячейки элементов RecyclerListView (Shift, добавление, удаление и т. Д.) |
| стиль | Нет | объект | Передать стиль в внутренний ScrollView |
| ScrollViewProps | Нет | объект | Для всех реквизитов, которые необходимо добывать для внутреннего/внешнего Scrollview. Поместите их в объект, и они будут распространяться и передавать. |
| макеты | Нет | Измерение | Предотвратит первоначальный пустой рендеринг, необходимый для вычисления размера ListView, и использовать эти измерения для визуализации элементов списка в самом первом рендеринге. Это полезно для таких случаев, как рендеринг на стороне сервера. Пропорт Canchangesize должен быть установлен на True, если размер можно изменить после рендеринга. Обратите внимание, что это не размер вида прокрутки и используется исключительно для макета. |
| onitemlayout | Нет | число | Функция обратного вызова, которая выполняется, когда был макет элемент RecyclerListView (по индексу). Это также может быть использовано в качестве прокси для обратных вызовов. |
| WindowCorrectionConfig | Нет | объект | Для указания используется конфигурация по коррекции окон и применить ли она к некоторым событиям прокрутки |
Для полного набора функций посмотрите на определения поддержки RecyclerListView (внизу файла). Все функции ScrollView , такие как RefreshControl , также работают из коробки.
applyWindowCorrection используется для динамического изменения видимых границ окон рециклиста. Уоррекция Windows of RecyclerListView вместе с текущим смещением прокрутки подвергается воздействию пользователя. Объект windowCorrection состоит из 3 числовых значений:
windowShift - Прямая замена параметра distanceFromWindow параметра. Сдвиг окна - это значение смещения, с помощью которого recyclerListView в целом смещен в пределах щетки, используйте этот параметр, чтобы указать, насколько далеко первая элемент списка находится от верхней части окна. Это значение корректирует смещения прокрутки для липков, а также RecyclerListView.startCorrection - StartCorrection используется для указания сдвига в верхнем видимом окне, с помощью которого пользователь может получить правильный экземпляр липкого заголовка, даже если внешний фактор, такой как панель инструментов ComportanatorLayout.endCorrection - EndCorrection используется для указания сдвига в нижнем видимом окне, с которым пользователь может получить правильный экземпляр липкого нижнего колонтитула, когда внешний фактор, подобный нижней панели приложений, меняет границу видимого представления.Как видно в примере ниже
TypeScript работает из коробки. Единственное выполнение - с унаследованными реквизитами ScrollView. Чтобы TypeScript работал с унаследованными реквизитами ScrollView, вы должны разместить указанные унаследованные реквизиты ScrollView в рамках ScrollViewProps.
< RecyclerListView
rowRenderer = { this . rowRenderer }
dataProvider = { queue }
layoutProvider = { this . layoutProvider }
onScroll = { this . checkRefetch }
renderFooter = { this . renderFooter }
scrollViewProps = { {
refreshControl : (
< RefreshControl
refreshing = { loading }
onRefresh = { async ( ) => {
this . setState ( { loading : true } ) ;
analytics . logEvent ( 'Event_Stagg_pull_to_refresh' ) ;
await refetchQueue ( ) ;
this . setState ( { loading : false } ) ;
} }
/>
)
} }
/> recyclerlistview/web , EG, import { RecyclerListView } from "recyclerlistview/web" . Используйте псевдонимы, если вы хотите сохранить путь импорта. Только специфичный код платформы является частью сборки, поэтому ни один ненужный код не будет доставлен с вашим приложением.requestAnimationFrame , ResizeObserver Apache v2.0
Пожалуйста, откройте проблемы для любых ошибок, с которыми вы сталкиваетесь. Вы можете обратиться ко мне в Twitter @naqvitalha или, написать по адресу [email protected] для любых вопросов, которые у вас могут возникнуть.
