recyclerlistview
Version 4.2.1
Si ce projet vous a aidé, veuillez nous soutenir avec une étoile ?.
Il s'agit d'une liste de performances élevées pour React Native et Web avec la prise en charge des dispositions complexes. JS uniquement sans dépendances natives, inspirée à la fois par RecyclerView sur Android et UICollectionView sur iOS.
npm install --save recyclerlistview
Pour la dernière version bêta:
npm install --save recyclerlistview@beta
Remarque: la documentation sera mise à niveau bientôt, pour l'instant, vérifiez les commentaires du code pour plus de clarté et explorant les fonctionnalités. Ce composant est également testé activement avec React Native Web.
RecyclerListView utilise le "recyclage des cellules" pour réutiliser des vues qui ne sont plus visibles pour rendre des éléments au lieu de créer de nouveaux objets de vue. La création d'objets est très coûteuse et est livrée avec une surcharge de mémoire, ce qui signifie que lorsque vous faites défiler la liste, l'empreinte de la mémoire continue de monter. La libération des éléments invisibles hors mémoire est une autre technique, mais cela conduit à la création de plus d'objets et de beaucoup de collections d'ordures. Le recyclage est le meilleur moyen de rendre des listes infinies qui ne compromettent pas les performances ou l'efficacité de la mémoire.
Outre tous les avantages de performance, RecyclerListView est livré avec de grandes fonctionnalités hors de la boîte:
forceNonDeterministicRendering )RecyclerListView a été construit en tenant compte des performances, ce qui signifie pas de blancs pendant que des rouleaux rapides ou des chutes de trame. RecyclerListView vous encourage à avoir des sommets déterministes pour les éléments que vous devez rendre. Cela ne signifie pas que vous devez avoir tous les éléments de la même hauteur et des mêmes trucs, tout ce dont vous avez besoin est un moyen de regarder les données et de calculer la hauteur à l'avance afin que RecyclerListView puisse calculer la disposition en un seul pass plutôt que d'attendre que le tirage se produise. Vous pouvez toujours faire toutes sortes de GridViews et ListViews avec différents types d'éléments qui sont tous recyclés de manière optimale. Le recyclage basé sur le type est très facile à faire et sort de la boîte.
Dans le cas où vous ne pouvez pas déterminer les hauteurs des éléments à l'avance, définissez simplement forceNonDeterministicRendering Prop à RecyclerListView. Maintenant, il traitera les dimensions données comme des estimations et permettra aux éléments de redimensionner. Essayez de donner de bonnes estimations pour améliorer l'expérience.
Production Flipkart Grocery Demo Video (ou essayez l'application): https://youtu.be/6yqeqp3mou
Changement de chargement / vue infini (Expo): https://snack.expo.io/@naqvitalha/rlv-demo
ViewTypes mixtes: https://snack.expo.io/b1gyad52b
ExtendedState, stableids et itemanimator (Expo): https://snack.expo.io/@arunreddy10/19bb8e
Exemple de projet: https://github.com/naqvitalha/travelmate
Exemple Web (en utilisant RNW): https://codesandbox.io/s/k54j2zx977, https://jolly-engelbart-8ff0d0.netlify.com/
Échantillon de préservation du contexte: https://github.com/naqvitalha/recyclerlistview-context-preservation-demo
Autre vidéo: https://www.youtube.com/watch?v=tnv4hmmpgmc
| Soutenir | Requis | Type de paramètres | Description |
|---|---|---|---|
| disposition | Oui | Baselayoutprovider | Fonction du constructeur qui définit la disposition (hauteur / largeur) de chaque élément |
| dataprovider | Oui | Dataprovider | Fonction du constructeur Le définit les données pour chaque élément |
| contexte | Non | Contexte | Utilisé pour maintenir la position de défilement au cas où la vue est détruite, ce qui se produit souvent avec la navigation arrière |
| RowRenderer | Oui | (Type: String | Number, Data: Any, Index: Number) => JSX.Element | Jsx.element [] | nul | Méthode qui renvoie le composant React à être rendu. Vous obtenez le type, les données, l'index et l'extension de la vue dans le rappel |
| InitialOffset | Non | nombre | Décalage initial Vous souhaitez commencer à rendu; Ceci est très utile si vous souhaitez maintenir le contexte de défilement entre les pages. |
| Renderaheadoffset | Non | nombre | Spécifiez combien de pixels à l'avance, vous souhaitez que les vues soient rendues. L'augmentation de cette valeur peut aider à réduire les blancs (le cas échéant). Cependant, garder cela aussi bas que possible devrait être l'intention. Des valeurs plus élevées augmentent également le calcul de la réapprovisionnement |
| ishorizontal | Non | booléen | Si c'est vrai, la liste fonctionnera horizontalement plutôt que verticalement |
| onscroll | Non | RawEvent: Scrollevent, Offsetx: Numéro, Offsety: Number) => void | Sur la fonction de rappel de défilement qui s'exécute en tant que défilement utilisateur |
| enceinte | Non | (params: onreCreatEparams) => void | Fonction de rappel qui est exécutée lors de la recréation de la vue du recycleur à partir du fournisseur de contexte |
| ExternalscrollView | Non | {new (accessoires: ScrollViewDefaultProps): BasescrollView} | Utilisez-le pour transmettre votre implémentation de BasescrollView |
| onendreached | Non | () => void | Fonction de rappel exécutée lorsque la fin de la vue est frappée (moins onendthreshold si défini) |
| onenDreachedThreshold | Non | nombre | Spécifiez le nombre de pixels à l'avance pour le rappel OneenDreached |
| onenDreachedThresholdralative | Non | nombre | Spécifiez à quelle distance de la fin (en unités de longueur visible de la liste), le bord inférieur de la liste doit être de la fin du contenu pour déclencher le rappel onendreached |
| onVisibleIndiceschanged | Non | Tonitemstatuschanged | Fournit l'indice visible; utile pour envoyer des événements d'impression |
| onvisible indexeschanged | Non | Tonitemstatuschanged | (Déprécié en bêta 2.0) fournit un indice visible; utile pour envoyer des événements d'impression |
| rendu | Non | () => Jsx.element | Jsx.element [] | nul | Fournissez cette méthode si vous souhaitez rendre un pied de page. Utile pour montrer un chargeur tout en faisant des charges incrémentielles |
| InitialRenderIndex | Non | nombre | Spécifiez l'indice initial de l'élément dont vous souhaitez que le rendu commence. Préféré à initialoffset si les deux spécifiés |
| faire défiler | Non | nombre | iOS seulement; Durée de la gaz de défilement |
| canchangesize | Non | booléen | Spécifiez si la taille peut changer |
| Distance de la distance | Non | nombre | (Désactif) Utilisez API applyWindowCorrection() avec windowShift . Usage? |
| AppliquerwindowCorrection | Non | (Offset: numéro, fenêtre: fenêtre windowCorrection) => void | (Amélioration / remplacement de l'API distanceFromWindow ) permet une mise à jour des bacs de fenêtre visibles en fonction des valeurs correctionnelles passées. L'utilisateur peut spécifier Windowshift ; Dans le cas où RecyclerListWindow doit se déplacer vers le bas / haut, startCorrection ; Dans le cas où lorsque la fenêtre supérieure liée doit être décalée pour la fenêtre supérieure ex pour être décalée vers le bas, un contenu chevauchant le bord supérieur de recyclerListView, EndCorrection : Pour modifier la fenêtre inférieure liée à un cas d'utilisation similaire. Usage? |
| usewindowscroll | Non | booléen | Web uniquement; Éléments de mise en page dans la fenêtre au lieu d'un div défilement |
| désactivation | Non | booléen | Désactive le recyclage |
| ForceNondeterministicRendering | Non | booléen | La valeur par défaut est fausse; Si les dimensions activées fournies dans le fournisseur de disposition ne seront pas strictement appliquées. Utilisez-le si les dimensions de l'élément ne peuvent pas être déterminées avec précision |
| État prolongé | Non | objet | Dans certains cas, les données transmises au niveau des lignes peuvent ne pas contenir toutes les informations dont dépend l'élément, vous pouvez garder toutes les autres informations à l'extérieur et les transmettre via cet accessoire. Changer cet objet fera que tout renvoie. Assurez-vous de ne pas le changer souvent pour assurer les performances. Les redesseurs sont lourds. |
| élémentanimateur | Non | Élémentanimateur | Permet d'animer les cellules d'élément recyclerListView (décalé, ajouter, supprimer, etc.) |
| style | Non | objet | Pour transmettre le style à Inner Scrollview |
| ScrollViewProps | Non | objet | Pour tous les accessoires qui doivent être proxés à un défilement intérieur / externe. Mettez-les dans un objet et ils seront répartis et transmis. |
| mises en page | Non | Dimension | Empêchera le rendu vide initial requis pour calculer la taille de ListView et utiliser ces dimensions pour rendre les éléments de liste dans le premier rendu lui-même. Ceci est utile pour des cas tels que le rendu côté serveur. Le canothangesize de l'hélice doit être défini sur True si la taille peut être modifiée après le rendu. Notez qu'il ne s'agit pas de la taille de la vue de défilement et est utilisé uniquement pour la mise en page. |
| onItemlayout | Non | nombre | Une fonction de rappel qui est exécutée lorsqu'un élément de RecyclerListView (dans un index) a été la mise en page. Cela peut également être utilisé comme un proxy pour les types de rappels à la tendance des éléments. |
| WindowCorrectionConfig | Non | objet | Utilisé pour spécifier la configuration de la correction de la fenêtre et si elle doit être appliquée à certains événements de défilement |
Pour l'ensemble de fonctionnalités complet, jetez un œil aux définitions d'hélice de RecyclerListView (en bas du fichier). Toutes les fonctionnalités ScrollView comme RefreshControl fonctionnent également hors de la boîte.
applyWindowCorrection est utilisé pour modifier dynamiquement les limites de fenêtre visibles du recyclerListView. La fenêtre de la fenêtre de RecyclerListView ainsi que le décalage de défilement actuel sont exposées à l'utilisateur. L'objet windowCorrection se compose de 3 valeurs numériques:
windowShift - Remplacement direct du paramètre distanceFromWindow . La fenêtre Shift est la valeur de décalage par laquelle le recyclerListView dans son ensemble est déplacé dans le stickyContainer, utilisez ce param pour spécifier à quelle distance le premier élément de liste est de la fenêtre en haut. Cette valeur corrige les décalages de défilement pour StickyObjects ainsi que RecyclerListView.startCorrection - StartCorrection est utilisée pour spécifier le décalage dans la fenêtre visible supérieure liée, avec laquelle l'utilisateur peut recevoir l'instance d'en-tête collante correcte même lorsqu'un facteur externe comme CoordinatorLayout Barbar.endCorrection - EndCorrection est utilisée pour spécifier le décalage dans la fenêtre visible inférieure liée, avec laquelle l'utilisateur peut recevoir une instance de pied de page collante correcte lorsqu'un facteur externe comme la barre d'application inférieure modifie la vue visible liée.Comme le montre l'exemple ci-dessous
TypeScript fonctionne hors de la boîte. La seule exécution est avec les accessoires ScrollView hérités. Pour que TypeScript fonctionne avec des accessoires ScrollView héréditaires, vous devez placer les accessoires ScrollView héréditaires dans le ScrollViewProps Prop.
< 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 , par exemple, import { RecyclerListView } from "recyclerlistview/web" . Utilisez des alias si vous souhaitez préserver le chemin d'importation. Seul le code spécifique à la plate-forme fait partie de la construction, donc aucun code inutile ne sera expédié avec votre application.requestAnimationFrame , ResizeObserver Apache v2.0
Veuillez ouvrir des problèmes pour tous les bogues que vous rencontrez. Vous pouvez me contacter sur Twitter @naqvitalha ou écrire à [email protected] pour toutes les questions que vous pourriez avoir.
