react native big list

Se este projeto o ajudou, apoie -nos com uma estrela?

Documentação

Descrição

O que é isso?

Esta é uma visualização da lista de alto desempenho para o React Native, com suporte para layouts complexos, usando um uso de lista plana semelhante para facilitar a substituição. Esta implementação de lista para renderização da Big List em React Native Works com um reciclador focado no desempenho e no uso da memória e, portanto, permite o processamento de milhares de itens na lista.

Você também pode experimentá -lo no aplicativo web publicado: demonstração

Por que outra biblioteca de listas?

A lista plana do React é ótima, mas quando se trata de grandes listas, ele tem algumas falhas por causa de seu cache de itens. Existe algumas alternativas, como react-native-largelist e recyclerlistview , mas ambas têm alguns problemas.

A react-native-largelist não é compatível com a Web e a Expo, possui código nativo que às vezes precisa ser reajustado e mantido, possui uma recicla de itens de lista estranha (porque nunca possui itens em branco), precisa de reestruturação de dados e teria alguns problemas ao tentar processar muitos dados (por exemplo: 100.000 itens) porque ele congelaria a CPU.

O recyclerlistview é performante, mas sofre de uma estrutura vazia no montante, posições estranhas de rolagem ao tentar rolar para um elemento no Monte e a implementação de cabeçalhos pegajosos entra em conflito com Animated .

Como funciona?

O reciclador facilita a exibição eficiente de grandes conjuntos de dados. Você fornece os dados e define como cada item se parece, e a biblioteca Recycler cria dinamicamente os elementos quando necessário. Como o nome indica, o reciclador recicla esses elementos individuais. Quando um item rola para fora da tela, o reciclador não destrói sua visão. Em vez disso, o reciclador reutiliza a visualização de novos itens que rolam na tela. Essa reutilização melhora bastante o desempenho, melhorando a capacidade de resposta do seu aplicativo e reduzindo o consumo de energia.

Quando a lista não pode renderizar seus itens com rapidez suficiente, os componentes não renderizados aparecerão como espaço em branco.

Esta biblioteca é totalmente nativa de JS, por isso é compatível com todas as plataformas disponíveis: Android, iOS, Windows, MacOS, Web e Expo .

Instalar

Instale a biblioteca a partir de NPM ou YARN apenas executando uma das seguintes linhas de comando:

npm	fio
npm install react-native-big-list --save	yarn add react-native-big-list

Uso

Leia também como migrar da lista de flats

Exemplo básico:

 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 } /> ;
} ;

Para mais exemplos, verifique o diretório example o diretório list ou verifique a documentação

? Capturas de tela

BigList vs Flatlist	Lista de seções

⚡️ Exemplo

Trechos

• Lista padrão
• Lista de colunas
• Lista de seções

Expo

Clone ou Download repo e depois:

 cd Example
yarn install # or npm install
expo start

Abra o cliente Expo no seu dispositivo. Use -o para digitalizar o código QR impresso pela expo start . Você pode ter que esperar um minuto enquanto seu projeto empunhava e carrega pela primeira vez.

Você também pode experimentá -lo no aplicativo web publicado: demonstração

Adereços e métodos

A lista possui os mesmos adereços do ScrollView, além de seus adereços e métodos específicos.

? Como contribuir

Tem uma ideia? Encontrou um bug? Por favor, levante a problemas ou puxe a solicitação. As contribuições são bem -vindas e são muito apreciadas! Cada pouquinho ajuda, e o crédito sempre será dado.