recyclerlistview
Version 4.2.1
Se este projeto o ajudou, apoie -nos com uma estrela?
Este é um ListView de alto desempenho para o React Native and Web, com suporte para layouts complexos. JS apenas sem dependências nativas, inspiradas em RecyclerView no Android e UicollectionView no iOS.
npm install --save recyclerlistview
Para a última beta:
npm install --save recyclerlistview@beta
Nota: A documentação será atualizada em breve, por enquanto, verifique os comentários do código para obter clareza e explorar os recursos. Este componente também é testado ativamente com a Web nativa React.
O RecyclerListView usa "Reciclagem de células" para reutilizar as visualizações que não são mais visíveis para renderizar itens em vez de criar novos objetos de exibição. A criação de objetos é muito cara e vem com uma sobrecarga de memória, o que significa que você rola pela lista, a pegada da memória continua subindo. Liberar itens invisíveis fora da memória é outra técnica, mas isso leva à criação de ainda mais objetos e muitas coleções de lixo. A reciclagem é a melhor maneira de renderizar listas infinitas que não comprometem o desempenho ou a eficiência da memória.
Além de todos os benefícios de desempenho RecyclerListView vem com ótimos recursos prontos para a caixa:
forceNonDeterministicRendering )O RecyclerListView foi construído com o desempenho em mente, o que significa que não há espaços em branco enquanto rolos rápidos ou gotas de quadros. O RecyclerListView incentiva você a ter alturas determinísticas para itens que você precisa renderizar. Isso não significa que você precisa ter todos os itens da mesma altura e outras coisas, tudo o que você precisa é de uma maneira de examinar os dados e calcular a altura inicial, para que o RecyclerListView possa calcular o layout em uma passagem, em vez de esperar o empate acontecer. Você ainda pode fazer todos os tipos de visualizações e visualizações de listagem com diferentes tipos de itens que são todos reciclados de maneiras ideais. A reciclagem baseada em tipo é muito fácil de fazer e sai da caixa.
Caso você não consiga determinar as alturas dos itens com antecedência, basta definir o ProP de forceNonDeterministicRendering para RecyclerlistView. Agora, tratará as dimensões dadas como estimativas e permitirá que os itens redimensionem. Tente dar boas estimativas para melhorar a experiência.
Produção Flipkart Demo Demo Video (ou tente o aplicativo): https://youtu.be/6yqeqp3mmou
Carregamento/View Infinite Mudança (Expo): https://snack.expo.io/@naqvitalha/rlv-demo
ViewTypes mixed: https://snack.expo.io/b1gyad52b
ExtendedState, StableIds e Itemanimator (expo): https://snack.expo.io/@arunreddy10/19bb8e
Projeto de amostra: https://github.com/naqvitalha/travelmate
Web Sample (usando RNW): https://codesandbox.io/s/k54j2zx977, https://jolly-engelbart-8ff0d0.netlify.com/
Amostra de preservação de contexto: https://github.com/naqvitalha/recyclerlistview-context-preservive-demo
Outro vídeo: https://www.youtube.com/watch?v=tnv4hmmpgmc
| Prop | Obrigatório | Tipo de parâmetros | Descrição |
|---|---|---|---|
| LayoutProvider | Sim | BaselayoutProvider | Função do construtor que define o layout (altura / largura) de cada elemento |
| DataProvider | Sim | DataProvider | Função do construtor Define os dados para cada elemento |
| ContextProvider | Não | ContextProvider | Usado para manter a posição de rolagem no caso de a visualização é destruída, o que geralmente acontece com a navegação nas costas |
| Rowrender | Sim | (TIPO: String | Número, Data: qualquer, índice: número) => jsx.Element | Jsx.Element [] | nulo | Método que retorna o componente React a ser renderizado. Você obtém o tipo, dados, índices e estendersedstate da visualização no retorno de chamada |
| InitialOffset | Não | número | Offset inicial do qual você deseja começar a renderizar; Isso é muito útil se você deseja manter o contexto de rolagem nas páginas. |
| Renderaheadoffset | Não | número | Especifique quantos pixels com antecedência você deseja que as visualizações sejam renderizadas. Aumentar esse valor pode ajudar a reduzir os espaços em branco (se houver). No entanto, manter isso o mais baixo possível deve ser a intenção. Valores mais altos também aumentam a computação de renderização |
| ishorizontal | Não | booleano | Se for verdade, a lista funcionará horizontalmente e não verticalmente |
| OnScroll | Não | RawEvent: Scrollevent, OffsetX: Número, Offsety: Número) => Void | Na função de retorno de chamada de rolagem que é executada como um usuário rola |
| Onrecreate | Não | (params: onrecreateParams) => void | Função de retorno de chamada que é executada ao recriar a visualização do Recycler do provedor de contexto |
| ExternalScrollView | Não | {new (Props: scrollViewDefaultProps): BasesCrollView} | Use isso para passar sua implementação de BasesCrollView |
| onendreached | Não | () => vazio | Função de retorno de chamada executada quando o final da visualização é atingido (menos onendhreshold se definido) |
| Onendreachedthreshold | Não | número | Especifique quantos pixels com antecedência para o retorno de chamada Onendreached |
| OnendreachedthresholdRelative | Não | número | Especifique a que distância do final (nas unidades de comprimento visível da lista) a borda inferior da lista deve ser do final do conteúdo para acionar o retorno de chamada do Onendreached |
| Onvisiblendiceschanged | Não | Tonitemstatuschanged | Fornece índice visível; útil para enviar eventos de impressão |
| OnvisibleIndexeschanged | Não | Tonitemstatuschanged | (Descontinuado no 2.0 beta) fornece índice visível; útil para enviar eventos de impressão |
| renderfooter | Não | () => Jsx.Element | Jsx.Element [] | nulo | Forneça esse método se desejar renderizar um rodapé. Útil para mostrar um carregador enquanto faz cargas incrementais |
| InitialrenderIndex | Não | número | Especifique o índice de item inicial que você deseja renderizar. Preferido no início do início, se ambos especificados |
| roldrottle | Não | número | apenas iOS; Duração do acelerador de role |
| Canchangesize | Não | booleano | Especifique se o tamanho pode mudar |
| à distância dewindow | Não | número | (Privado) Uso APP applyWindowCorrection() API com windowShift . Uso? |
| Aplique a correção da ApplyWindowCorrection | Não | (Offset: Número, WindowCorrection: WindowCorrection) => void | (Aprimoramento/substituição na API distanceFromWindow ) permite a atualização das janelas visíveis e com base nos valores correcionais aprovados. O usuário pode especificar Windowshift ; Caso todo o reciclista que awindow precise descer/para cima, o startCorrection ; Caso o limite da janela superior precise ser deslocado para a janela superior Ex Limited a ser deslocada para baixo, um conteúdo sobreponte a borda superior do RecyclerListView, EndCorrection : para alterar a janela inferior ligada para uma caixa de uso semelhante. Uso? |
| usewindowscroll | Não | booleano | Somente web; Elementos de layout na janela em vez de uma div rolável |
| desabilitador | Não | booleano | Desligue a reciclagem |
| forcenondeterministicrendering | Não | booleano | O padrão é falso; Se as dimensões ativadas fornecidas no provedor de layout não serão estritamente aplicadas. Use isso se as dimensões do item não puderem ser determinadas com precisão |
| ExtendedState | Não | objeto | Em alguns casos, os dados aprovados no nível da linha podem não conter todas as informações de que o item depende, você pode manter todas as outras informações do lado de fora e passá -las por meio deste suporte. Alterar esse objeto fará com que tudo renderize novamente. Certifique -se de não alterá -lo com frequência para garantir o desempenho. Os renderizadores são pesados. |
| itemanimator | Não | Itemanimator | Ativa a animação das células do item RecyclerListView (mudança, adicione, remover, etc.) |
| estilo | Não | objeto | Para passar o estilo para o interno scrollView |
| scrollViewProps | Não | objeto | Para todos os adereços que precisam ser proxiados no scrollView interno/externo. Coloque -os em um objeto e eles serão espalhados e passados. |
| layoutSize | Não | Dimensão | Impedirá que a renderização vazia inicial necessária para calcular o tamanho do ListView e usar essas dimensões para renderizar itens da lista na própria renderização. Isso é útil para casos como renderização do lado do servidor. O Prop Canchangesize deve ser definido como TRUE se o tamanho puder ser alterado após a renderização. Observe que esse não é o tamanho da exibição de rolagem e é usado apenas para layouting. |
| oniTemlayout | Não | número | Uma função de retorno de chamada que é executada quando um item do RecyclerListView (em um índice) foi layout. Isso também pode ser usado como proxy para o tipo de retorno de chamada de itens. |
| WindowCorrectionConfig | Não | objeto | Usado para especificar é a configuração de correção de janelas e se ela deve ser aplicada a alguns eventos de rolagem |
Para o conjunto de recursos completos, consulte as definições de suporte do RecyclerListView (parte inferior do arquivo). Todos os recursos ScrollView , como RefreshControl , também funcionam fora da caixa.
Aplicar applyWindowCorrection para alterar os limites da janela visível do RecyclerListView dinamicamente. A correção da Window do RecyclerListView junto com o deslocamento de rolagem atual é exposta ao usuário. O objeto windowCorrection consiste em 3 valores numéricos:
windowShift - Substituição direta do parâmetro distanceFromWindow . A mudança de janela é o valor de deslocamento pelo qual o RecyclerListView como um todo é deslocado dentro do stickyContainer, use este param para especificar a que distância o primeiro item da lista é do topo da janela. Este valor corrige as compensações de rolagem para stickyobjects, bem como o RecyclerListView.startCorrection - O startCorrection é usado para especificar a mudança na janela superior visível, com o qual o usuário pode receber a instância correta do cabeçalho, mesmo quando um fator externo como a barra de ferramentas CoordenatorLayout.endCorrection - O ENDCorrection é usado para especificar a mudança no limite da janela visível inferior, com o qual o usuário pode receber uma instância correta do rodapé pegajoso quando um fator externo como a barra de aplicativo inferior está alterando o limite visível da exibição.Como visto no exemplo abaixo
O TypeScript funciona fora da caixa. A única execução é com os Props ScrollView herdados. Para que o TypeScript funcione com os acessórios ScrollView herdados, você deve colocar o referido Props ScrollView herdado dentro do suporte 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" . Use aliases se você deseja preservar o caminho de importação. Somente o código específico da plataforma faz parte da construção, portanto, nenhum código desnecessário será enviado com seu aplicativo.requestAnimationFrame , ResizeObserver Apache v2.0
Abra os problemas para todos os bugs que você encontrar. Você pode entrar em contato comigo no Twitter @naqvitalha ou, escreva para [email protected] para qualquer dúvida que possa ter.
