Partage
  • Partager sur Facebook
  • Partager sur Twitter

React Nation : Flatlist et pagination

12 mai 2021 à 16:19:40

(Edit : React Native*, désolé pour la faute de frappe sur le titre)

Bonjour,

Comment à partir d'une Flatlist puis je faire de la pagination?

Imaginez une liste d'article associé à une recherche avec plein de page, voilà ce que j'aimerai faire.

Disons 10 article par page.

J'ai du mal à trouver un bon tutoriel. Merci d'avance.

-
Edité par Daga-7 12 mai 2021 à 16:20:23

  • Partager sur Facebook
  • Partager sur Twitter
18 mai 2021 à 1:51:38

J'arrive pas, j'ai vraiment besoin d'aide du coup je UP le sujet. :D

Je veux faire quelque chose de similaire à Amazon ou Leboncoin, un tableau d'article diviser en plusieurs pages, comment procédez sur React Native?

  • Partager sur Facebook
  • Partager sur Twitter
20 mai 2021 à 8:16:21

Bonjour je pense que tu peut faire un système de pagination traditionnel indépendamment de l'environement de ReactNative.

Dans ton composant qui doit affiché les articles tu peut mettre dans l'état du composant un donnée page qui et un nombre qui contient la page à affiché par défaut 0,

il te faut une constante où une variable qui définit la limite d'articles par pages.

Une fonction qui renvoi les articles associé à la page actuel,

et dans le rendue de la pagination tu mets juste à jour le state de la page.

const LIMIT_PER_PAGE = 10;

const ArticlesList = ({articles}) => {

	const [page, setPage] = React.useState(0);
    
    const MAX_PAGE = Math.ceil(articles.length / LIMIT_PER_PAGE);
	
    function getSequence() {
    	
        return articles.slice(LIMIT_PER_PAGE * page, LIMIT_PER_PAGE * (page + 1) );
    }

};

 En principe le reste du composant c'est uniquement du rendue et des événements à écouté,

le render des items de la pagination et écouté les events sur la pagination.

Après le changement de page fera rechargé le composant comme il fait partie de l'état local et la vue se mettra à jour car elle dépend de la page pour se construire.

Si tu dois ré utilisé le système de pagination ailleurs dans ton application, tu pourras  essayé de l'externalisé dans un composant appart, ce qui dois être faisable.

-
Edité par SamuelGaborieau3 20 mai 2021 à 8:17:57

  • Partager sur Facebook
  • Partager sur Twitter

suggestion de présentation.

23 mai 2021 à 2:36:48

Cool merci je vais essayer. :)
  • Partager sur Facebook
  • Partager sur Twitter