react native big list

Если этот проект вам помог, пожалуйста, поддержите нас звездой?

Документация

Описание

Что это?

Это высокопроизводительный список для React Native с поддержкой сложных макетов с использованием аналогичного использования FLATLILE, чтобы облегчить замену. Эта реализация списка для визуализации Big List в React Native Works с переработчиком, сфокусированным на производительности и использовании памяти, и поэтому она позволяет обрабатывать тысячи пунктов в списке.

Вы также можете попробовать это в опубликованном веб -приложении: демонстрация

Почему другая библиотека списков?

Реакция Fatlist от React Native отлично, но когда дело доходит до больших списков, у него есть некоторые недостатки из -за кэширования предмета. Существуют некоторые альтернативы, такие как react-native-largelist и recyclerlistview но у обоих есть некоторые проблемы.

react-native-largelist не совместим с Web и Expo, имеет собственный код, который иногда должен быть перенесен и поддерживаться, иметь странные переработки элементов списка (потому что он никогда не имеет пустых элементов), нуждается в реструктуризации данных и имеет некоторые проблемы при попытке обработать множество данных (например: 100 000 элементов), потому что он будет отчитывать CPU.

recyclerlistview является исполнением, но страдает от пустой рамы на креплении, странные позиции прокрутки при попытке прокрутить элемент на креплении, и реализация липких заголовков конфликтует с Animated .

Как это работает?

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

Когда список не может отобрать ваши предметы достаточно быстро, неразрушенные компоненты появятся как пустое пространство.

Эта библиотека полностью носит JS, поэтому она совместима со всеми доступными платформами: Android, iOS, Windows, MacOS, Web и Expo .

Установить

Установите библиотеку из NPM или пряжи, просто запустив одну из следующих командных строк:

npm	пряжа
npm install react-native-big-list --save	yarn add react-native-big-list

Использование

Читайте также, как мигрировать из Flat -Stiled

Основной пример:

 import BigList from "react-native-big-list" ;
// ...
const MyExample = ( { data } ) => {
  const renderItem = ( { item , index } ) => < MyListItem item = { item } /> ;
  return < BigList data = { data } renderItem = { renderItem } itemHeight = { 50 } /> ;
} ;

Для получения дополнительных примеров проверьте каталог example list каталог или проверьте документацию

? Скриншоты

Biglist против Flatlist	Список разделов

⚡ Пример

Фрагменты

• Стандартный список
• Список столбцов
• Список разделов

Экспо

Клонировать или скачать репо и после:

 cd Example
yarn install # or npm install
expo start

Откройте Expo Client на вашем устройстве. Используйте его, чтобы сканировать QR -код, напечатанный expo start . Возможно, вам придется подождать минуту, пока ваш проект переживает и загружается в первый раз.

Вы также можете попробовать это в опубликованном веб -приложении: демонстрация

Реквизит и методы

Список имеет одинаковые реквизиты ScrollView в дополнение к его конкретным реквизитам и методам.

? Как внести свой вклад

Есть идея? Нашел ошибку? Пожалуйста, поднимитесь на проблемы или обращайте запрос. Взносы приветствуются и высоко ценятся! Каждый маленький бит помогает, и кредит всегда будет отдаваться.